From 8c40a1aa96273d146034551b98f932caf8e16fba Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <pjentsch@sfb1288inf-Laptop.fritz.box>
Date: Mon, 10 Feb 2020 13:25:15 +0100
Subject: [PATCH] Add Posterpage
---
app/main/views.py | 5 +
app/templates/main/index.html.j2 | 129 ++++++++++++++--
app/templates/main/poster.html.j2 | 145 ++++++++++++++++++
app/templates/nopaque.html.j2 | 10 +-
.../services/corpus_analysis.html.j2 | 52 ++++---
5 files changed, 297 insertions(+), 44 deletions(-)
create mode 100644 app/templates/main/poster.html.j2
diff --git a/app/main/views.py b/app/main/views.py
index 5f20d853..03f6a9b5 100644
--- a/app/main/views.py
+++ b/app/main/views.py
@@ -12,3 +12,8 @@ def index():
@login_required
def dashboard():
return render_template('main/dashboard.html.j2', title='Dashboard')
+
+
+@main.route('/poster')
+def poster():
+ return render_template('main/poster.html.j2', title='Dienste und Prozesse')
diff --git a/app/templates/main/index.html.j2 b/app/templates/main/index.html.j2
index 3db4a3cf..e97b6bf8 100644
--- a/app/templates/main/index.html.j2
+++ b/app/templates/main/index.html.j2
@@ -1,45 +1,144 @@
{% extends "nopaque.html.j2" %}
-{% set full_width = False %}
+{% set full_width = True %}
{% set roadmap = False %}
{% block page_content %}
-<div class="col s12 m4">
- <h3>nopaque?</h3>
- <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Eingabe</span>
+ <p>Textdaten in Form von Bildern, Fotos, Scans…</p>
+ </div>
+ </div>
</div>
-<div class="col s12 m8">
+<div class="col s6">
<div class="card">
<div class="card-content">
- <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+ <span class="card-title"><i class="material-icons left">burst_mode</i>Setup files</span>
+ <p>
+ Häufig liegen Datenbestände in verschiedenen Formaten und verstreut
+ vor. Da eine Verarbeitung via nopaque ein einheitliches Datenformat
+ vorsieht, wird dieser Dienst zur Verfügung gestellt, um etwaig
+ anfallende Konvertierungsprozesse durchzuführen.
+ </p>
+ <blockquote>Umgesetzt mit <i>ImageMagick</i></blockquote>
</div>
</div>
</div>
-<div class="col s12 m4">
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Ausgabe</span>
+ <p>Aus den Eingaben zusammengesetzte Multipage-TIFF-Dateien.</p>
+ </div>
+ </div>
+</div>
+
+<div class="col s12"></div>
+
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Eingabe</span>
+ <p>Textdaten in Form von Multipage-TIFF- oder PDF-Dateien.</p>
+ </div>
+ </div>
+</div>
+
+<div class="col s6">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title"><i class="material-icons left">find_in_page</i>Optical Character Recognition</span>
+ <p>
+ Durch optische Analysemethoden mit werden aus Bilddaten, wie Fotos
+ oder Scans, Textdaten erzeugt. Erst dieser Vorverarbeitungsschritt
+ ermöglicht eine weitere computergestützte Verarbeitung von Dokumenten.
+ </p>
+ <blockquote>Umgesetzt mit <i>Tesseract OCR</i></blockquote>
+ </div>
+ </div>
+</div>
+
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Ausgabe</span>
+ <p>
+ Textdateien, PDF-Dateien und TEI P5 konformen XML-Dateien.
+ </p>
+ </div>
+ </div>
+</div>
+
+<div class="col s12"></div>
+
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Eingabe</span>
+ <p>Ausschließlich Textdateien.</p>
+ </div>
+ </div>
+</div>
+
+<div class="col s6">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title"><i class="material-icons left">format_textdirection_l_to_r</i>Natural Language Processing</span>
+ <p>
+ Mit Hilfe computergestützter linguistischer
+ Datenverarbeitungsmethoden (Tokenisierung, Lemmatisierung,
+ Part-of-speech-Tagging und Eigennamenerkennung) werden Textdateien
+ mit weiteren Informationen angereichert.
+ </p>
+ <blockquote>Umgesetzt mit <i>spaCy</i></blockquote>
+ </div>
+ </div>
+</div>
+
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Ausgabe</span>
+ <p>Korpus Dateien im <i>verticalized text</i>-Format (XML-Dialekt).</p>
+ </div>
+ </div>
+</div>
+
+<div class="col s12"></div>
+
+<div class="col s3">
<div class="card">
<div class="card-content">
- <span class="card-title">Open source</span>
- <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
+ <span class="card-title">Eingabe</span>
+ <p>Korpus Dateien und Metadaten entsprechend des BibTeX-Schemas.</p>
</div>
</div>
</div>
-<div class="col s12 m4">
+<div class="col s6">
<div class="card">
<div class="card-content">
- <span class="card-title">Cloud processing</span>
- <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
+ <span class="card-title"><i class="material-icons left">search</i>Corpus Analysis</span>
+ <p>
+ Mittels CQP Query Language als Abfragesprache können komplexe
+ Suchanfragen unter ZuÂhilÂfeÂnahÂme von Metadaten und NLP-Auszeichnungen
+ ausgeführt werden. Ergebnisse können als Text oder in abstrakter
+ Darstellung ausgewertet werden.
+ </p>
+ <blockquote>Umgesetzt mit <i>IMS Open Corpus Workbench</i></blockquote>
</div>
</div>
</div>
-<div class="col s12 m4">
+<div class="col s3">
<div class="card">
<div class="card-content">
- <span class="card-title">Context</span>
- <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
+ <span class="card-title">Ausgabe</span>
+ <p>Export der Ergebnisse in CSV, Excel, JSON und HTML.</p>
</div>
</div>
</div>
diff --git a/app/templates/main/poster.html.j2 b/app/templates/main/poster.html.j2
new file mode 100644
index 00000000..e97b6bf8
--- /dev/null
+++ b/app/templates/main/poster.html.j2
@@ -0,0 +1,145 @@
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = True %}
+{% set roadmap = False %}
+
+{% block page_content %}
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Eingabe</span>
+ <p>Textdaten in Form von Bildern, Fotos, Scans…</p>
+ </div>
+ </div>
+</div>
+
+<div class="col s6">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title"><i class="material-icons left">burst_mode</i>Setup files</span>
+ <p>
+ Häufig liegen Datenbestände in verschiedenen Formaten und verstreut
+ vor. Da eine Verarbeitung via nopaque ein einheitliches Datenformat
+ vorsieht, wird dieser Dienst zur Verfügung gestellt, um etwaig
+ anfallende Konvertierungsprozesse durchzuführen.
+ </p>
+ <blockquote>Umgesetzt mit <i>ImageMagick</i></blockquote>
+ </div>
+ </div>
+</div>
+
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Ausgabe</span>
+ <p>Aus den Eingaben zusammengesetzte Multipage-TIFF-Dateien.</p>
+ </div>
+ </div>
+</div>
+
+<div class="col s12"></div>
+
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Eingabe</span>
+ <p>Textdaten in Form von Multipage-TIFF- oder PDF-Dateien.</p>
+ </div>
+ </div>
+</div>
+
+<div class="col s6">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title"><i class="material-icons left">find_in_page</i>Optical Character Recognition</span>
+ <p>
+ Durch optische Analysemethoden mit werden aus Bilddaten, wie Fotos
+ oder Scans, Textdaten erzeugt. Erst dieser Vorverarbeitungsschritt
+ ermöglicht eine weitere computergestützte Verarbeitung von Dokumenten.
+ </p>
+ <blockquote>Umgesetzt mit <i>Tesseract OCR</i></blockquote>
+ </div>
+ </div>
+</div>
+
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Ausgabe</span>
+ <p>
+ Textdateien, PDF-Dateien und TEI P5 konformen XML-Dateien.
+ </p>
+ </div>
+ </div>
+</div>
+
+<div class="col s12"></div>
+
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Eingabe</span>
+ <p>Ausschließlich Textdateien.</p>
+ </div>
+ </div>
+</div>
+
+<div class="col s6">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title"><i class="material-icons left">format_textdirection_l_to_r</i>Natural Language Processing</span>
+ <p>
+ Mit Hilfe computergestützter linguistischer
+ Datenverarbeitungsmethoden (Tokenisierung, Lemmatisierung,
+ Part-of-speech-Tagging und Eigennamenerkennung) werden Textdateien
+ mit weiteren Informationen angereichert.
+ </p>
+ <blockquote>Umgesetzt mit <i>spaCy</i></blockquote>
+ </div>
+ </div>
+</div>
+
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Ausgabe</span>
+ <p>Korpus Dateien im <i>verticalized text</i>-Format (XML-Dialekt).</p>
+ </div>
+ </div>
+</div>
+
+<div class="col s12"></div>
+
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Eingabe</span>
+ <p>Korpus Dateien und Metadaten entsprechend des BibTeX-Schemas.</p>
+ </div>
+ </div>
+</div>
+
+<div class="col s6">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title"><i class="material-icons left">search</i>Corpus Analysis</span>
+ <p>
+ Mittels CQP Query Language als Abfragesprache können komplexe
+ Suchanfragen unter ZuÂhilÂfeÂnahÂme von Metadaten und NLP-Auszeichnungen
+ ausgeführt werden. Ergebnisse können als Text oder in abstrakter
+ Darstellung ausgewertet werden.
+ </p>
+ <blockquote>Umgesetzt mit <i>IMS Open Corpus Workbench</i></blockquote>
+ </div>
+ </div>
+</div>
+
+<div class="col s3">
+ <div class="card">
+ <div class="card-content">
+ <span class="card-title">Ausgabe</span>
+ <p>Export der Ergebnisse in CSV, Excel, JSON und HTML.</p>
+ </div>
+ </div>
+</div>
+{% endblock %}
diff --git a/app/templates/nopaque.html.j2 b/app/templates/nopaque.html.j2
index 23acebbb..619ad84a 100644
--- a/app/templates/nopaque.html.j2
+++ b/app/templates/nopaque.html.j2
@@ -60,8 +60,8 @@
<li><a href="{{ url_for('main.index') }}"><i class="material-icons">opacity</i>nopaque</a></li>
<li><a href="#"><i class="material-icons">linear_scale</i>Workflow</a></li>
<li><a href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a></li>
- <li style="margin-left: 15px;"><a href="{{ url_for('main.dashboard', _anchor='my_anchor') }}"><i class="material-icons">book</i>Corpora</a></li>
- <li style="margin-left: 15px;"><a href="{{ url_for('main.dashboard', _anchor='my_anchor') }}"><i class="material-icons">work</i>Jobs</a></li>
+ <li><a href="{{ url_for('main.dashboard', _anchor='my_anchor') }}" style="padding-left: 47px;"><i class="material-icons">book</i>Corpora</a></li>
+ <li><a href="{{ url_for('main.dashboard', _anchor='my_anchor') }}" style="padding-left: 47px;"><i class="material-icons">work</i>Jobs</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Processes and Services</a></li>
<li><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="material-icons">search</i>Corpus Analysis</a></li>
@@ -100,8 +100,10 @@
{% else %}
<div class="col s12">
{% endif %}
- {% block page_content %}
- {% endblock %}
+ <div class="row">
+ {% block page_content %}
+ {% endblock %}
+ </div>
</div>
{% if roadmap %}
<div class="col hide-on-small-only m3 l2">
diff --git a/app/templates/services/corpus_analysis.html.j2 b/app/templates/services/corpus_analysis.html.j2
index 0d9a4829..c3a6d0b3 100644
--- a/app/templates/services/corpus_analysis.html.j2
+++ b/app/templates/services/corpus_analysis.html.j2
@@ -4,33 +4,35 @@
{% set roadmap = True %}
{% block page_content %}
-<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
+<div class="col s12">
+ <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
-<div class="card">
- <div class="card-content" id="corpora">
- <div class="input-field">
- <i class="material-icons prefix">search</i>
- <input id="search-corpus" class="search" type="search"></input>
- <label for="search-corpus">Search corpus</label>
+ <div class="card">
+ <div class="card-content" id="corpora">
+ <div class="input-field">
+ <i class="material-icons prefix">search</i>
+ <input id="search-corpus" class="search" type="search"></input>
+ <label for="search-corpus">Search corpus</label>
+ </div>
+ <table>
+ <thead>
+ <tr>
+ <th></th>
+ <th>
+ <span class="sort" data-sort="title">Title</span>
+ <span class="sort" data-sort="description">Description</span>
+ </th>
+ <th><span class="sort" data-sort="status">Status</span></th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody class="list"></tbody>
+ </table>
+ <ul class="pagination"></ul>
+ </div>
+ <div class="card-action right-align">
+ <a class="waves-effect waves-light btn" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
</div>
- <table>
- <thead>
- <tr>
- <th></th>
- <th>
- <span class="sort" data-sort="title">Title</span>
- <span class="sort" data-sort="description">Description</span>
- </th>
- <th><span class="sort" data-sort="status">Status</span></th>
- <th></th>
- </tr>
- </thead>
- <tbody class="list"></tbody>
- </table>
- <ul class="pagination"></ul>
- </div>
- <div class="card-action right-align">
- <a class="waves-effect waves-light btn" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
</div>
</div>
--
GitLab