Commit c51f11e6 authored by Dennis Appel's avatar Dennis Appel

Add code documentation, readme and update checklist with small guide

parent c6a890fe
# Info-Portal zur Entwicklung barrierefreier Apps
Das Info-Portal ist eine Projekt Arbeit für das Modul Software Ergonomie
im Wintersemester 2018/2019.<br>
Es bietet allgemeine Informationen, ein Wiki, sowie eine interaktive Checkliste
mit wichtigen Richtlininien zur Entwicklung einer barrierefreien App.
<br>
## Installation
Das Portal verwendet Django und Foundation CSS als Frameworks. N&ouml;tige Pakete
k&ouml;nnen mit pip (im project root) und npm (im static Verzeichnis) installiert werden.
Zudem wird eine PostgresSQL Datenbank ben&ouml;tigt.<br>
Nachdem alle Abh&auml;ngigkeiten installiert wurden, kann der Server mit dem Befehl
`python3 manage.py runserver` im project root gestartet werden und unter der Adresse
[127.0.0.1:8000](https://127.0.0.1) im Browser aufgerufen werden.
<br>
## Dokumentation
Relevanter Code ist in den jeweiligen nicht Framework Dateien kommentiert.
Zu diesen Dateien geh&ouml;ren:
* */views.py
* */models.py
* */templates/\*/\*.html
* /static/js/app.js
......@@ -8,43 +8,98 @@
{% block content %}
<section>
<div class="grid-container">
<div class="grid-x cell-background-lg">
<div class="cell vertical-space">
<h1>Impressum</h1>
</div>
<div class="cell">
<ul class='no-bullet'>
<li>Technische Hochschule Mittelhessen</li>
<li>Wilhelm-Leuschner-Strafle 13</li>
<li>61169 Friedberg (Hessen)</li>
<li>Telefon: 06031 6040</li>
<li>E-Mail: marc.ackermann@iem.thm.de</li>
</ul>
</div>
<div class="cell">
<ul class='no-bullet'>
<li>Vertreten durch die Studierenden:</li>
<li>Dennis Appel</li>
<li>Marc Ackermann</li>
<li>Selina G&ouml;rnert</li>
<li>Jan Ilge</li>
</ul>
<div class="grid-container">
<div class="grid-x cell-background-lg">
<div class="cell vertical-space">
<h1>Impressum</h1>
</div>
<div class="cell">
<ul class='no-bullet'>
<li>Technische Hochschule Mittelhessen</li>
<li>Wilhelm-Leuschner-Strafle 13</li>
<li>61169 Friedberg (Hessen)</li>
<li>Telefon: 06031 6040</li>
<li>E-Mail: marc.ackermann@iem.thm.de</li>
</ul>
</div>
<div class="cell">
<ul class='no-bullet'>
<li>Vertreten durch die Studierenden:</li>
<li>Dennis Appel</li>
<li>Marc Ackermann</li>
<li>Selina G&ouml;rnert</li>
<li>Jan Ilge</li>
</ul>
</div>
<div class="cell">
<h2>Rechtliche Hinweise</h2>
<h3>&sect; 1 Inhaltliche Warnhinweise</h3>
<p>
Die kostenlosen und frei zug&auml;nglichen Informationen dieser Webportals wurden mit großm&ouml;glichster Sorgfalt erstellt. Es wird jedoch keine Gewahr f&uuml;r die Richtigkeit und Aktualit&auml;t der bereitgestellten kostenlosen und frei zug&auml;nglichen Eintr&auml;ge und Beispielen. Namentlich gekennzeichnete Beitr&auml;ge geben die Meinung des jeweiligen Autors und nicht immer die Meinung des Anbieters wieder.
Allein durch den Aufruf der kostenlosen und frei zug&auml;nglichen Inhalte kommt keinerlei Vertragsverh&auml;ltnis zwischen dem Nutzer und dem Anbieter zustande, insoweit fehlt es am Rechtbindungswillen des Anbieters.
</p>
<h3>&sect; 2 Urheber- und Leistungsschutzrechte</h3>
<p>
Die auf diesem Webportal ver&ouml;ffentlichen Inhalte unterliegen dem deutschen Urheber- und Leistungsschutzrecht. Jede davon nicht zugelassene Verwertung bedarf der vorherigen schriftlichen Zustimmung des Anbieters. Dies gilt insbesondere f&uuml;r Vervielf&auml;ltigung, Bearbeitung, &Uuml;bersetzung, Einspeicherung und Verarbeitung. Die unerlaubte Vervielf&auml;ltigung oder Weitergabe kompletter Seiten ist nicht gestattet und strafbar.
</p>
</div>
</section>
</div>
<div class="cell">
<h2>Rechtliche Hinweise</h2>
<h3>&sect; 1 Inhaltliche Warnhinweise</h3>
<p>
Die kostenlosen und frei zug&auml;nglichen Informationen dieser Webportals wurden mit großm&ouml;glichster Sorgfalt erstellt. Es wird jedoch keine Gewahr f&uuml;r die Richtigkeit und Aktualit&auml;t der bereitgestellten kostenlosen und frei zug&auml;nglichen Eintr&auml;ge und Beispielen. Namentlich gekennzeichnete Beitr&auml;ge geben die Meinung des jeweiligen Autors und nicht immer die Meinung des Anbieters wieder.
Allein durch den Aufruf der kostenlosen und frei zug&auml;nglichen Inhalte kommt keinerlei Vertragsverh&auml;ltnis zwischen dem Nutzer und dem Anbieter zustande, insoweit fehlt es am Rechtbindungswillen des Anbieters.
</p>
<h3>&sect; 2 Urheber- und Leistungsschutzrechte</h3>
<p>
Die auf diesem Webportal ver&ouml;ffentlichen Inhalte unterliegen dem deutschen Urheber- und Leistungsschutzrecht. Jede davon nicht zugelassene Verwertung bedarf der vorherigen schriftlichen Zustimmung des Anbieters. Dies gilt insbesondere f&uuml;r Vervielf&auml;ltigung, Bearbeitung, &Uuml;bersetzung, Einspeicherung und Verarbeitung. Die unerlaubte Vervielf&auml;ltigung oder Weitergabe kompletter Seiten ist nicht gestattet und strafbar.
</p>
</div>
<div class="cell vertical-space">
<h2>Quellen</h2>
<h3>Bilder</h3>
<ul>
<li>
<a href="https://pixabay.com/de/inklusion-gruppe-rollstuhl-2731343/">https://pixabay.com/de/inklusion-gruppe-rollstuhl-2731343/</a>
</li>
</ul>
<h3>Inhalte</h3>
<ul>
<li>
<a href="https://www.w3.org/Translations/WCAG20-de/">https://www.w3.org/Translations/WCAG20-de/</a>
</li>
<li>
<a href="https://www.funkschau.de/mobile-solutions/artikel/144958/">https://www.funkschau.de/mobile-solutions/artikel/144958/</a>
</li>
<li>
<a href="https://www.youbility.de/blog/das-internet-ist-fur-alle-da-checkliste-zur-barrierefreiheit-von-webanwendungen/">https://www.youbility.de/blog/das-internet-ist-fur-alle-da-checkliste-zur-barrierefreiheit-von-webanwendungen/</a>
</li>
<li>
<a href="http://www.leserlich.info/index.php">http://www.leserlich.info/index.php</a>
</li>
<li>
<a href="https://www.barrierefreies-webdesign.de/richtlinien/wcag-2.0-deutsch-englisch/konformitaetsstufe.html">https://www.barrierefreies-webdesign.de/richtlinien/wcag-2.0-deutsch-englisch/konformitaetsstufe.html</a>
</li>
<li>
<a href="https://www.bitfactory.io/de/blog/barrierefreie-apps/">https://www.bitfactory.io/de/blog/barrierefreie-apps/</a>
</li>
<li>
<a href="https://www.marlem-software.de/marlemblog/2013/06/11/richtlinien-zur-barrierefreien-software-entwicklung-fur-java-von-ibm/">https://www.marlem-software.de/marlemblog/2013/06/11/richtlinien-zur-barrierefreien-software-entwicklung-fur-java-von-ibm/<Paste></a>
</li>
<li>
<a href="http://www.di-ji.de">http://www.di-ji.de</a>
</li>
<li>
<a href="https://www.einfach-fuer-alle.de/blog/id/2792/ ">https://www.einfach-fuer-alle.de/blog/id/2792/ </a>
</li>
<li>
<a href="https://www.bundesfachstelle-barrierefreiheit.de/DE/Praxishilfen/Informationstechnik/Barrierefreie-Apps/barrierefreie-apps_node.html">https://www.bundesfachstelle-barrierefreiheit.de/DE/Praxishilfen/Informationstechnik/Barrierefreie-Apps/barrierefreie-apps_node.html</a>
</li>
<li>
<a href="https://www.pctipp.ch/tipps-tricks/kummerkasten/multimedia/artikel/farben-fuer-farbenblinde-auswaehlen-81076/">https://www.pctipp.ch/tipps-tricks/kummerkasten/multimedia/artikel/farben-fuer-farbenblinde-auswaehlen-81076/</a>
</li>
<li>
<a href="https://www.mytherapyapp.com/de/blog/barrierefreie-apps-technik">https://www.mytherapyapp.com/de/blog/barrierefreie-apps-technik</a>
</li>
<li>
<a href="https://www.apple.com/de/accessibility/">https://www.apple.com/de/accessibility/</a>
</li>
<li>
<a href="https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/">https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/</a>
</li>
<li>
<a href="https://developer.android.com/guide/topics/ui/accessibility/">https://developer.android.com/guide/topics/ui/accessibility/</a>
</li>
</ul>
</div>
{% endblock %}
{% endblock %}
......@@ -2,8 +2,14 @@ from django.views import generic
class IndexView(generic.TemplateView):
"""
Default view for about page
"""
template_name = 'about/index.html'
class ImpressumView(generic.TemplateView):
"""
View class that loads the impressum
"""
template_name = 'about/impressum.html'
......@@ -2,6 +2,9 @@ from django.db import models
class CheckListCategory(models.Model):
"""
Model for checklist categories
"""
wikiEntry = models.ForeignKey(
'wiki.WikiEntry', on_delete=models.SET_NULL, blank=True, null=True)
categoryTitle = models.CharField(max_length=100)
......@@ -14,6 +17,9 @@ class CheckListCategory(models.Model):
class CheckListEntry(models.Model):
"""
Model for checklist entries, severity describes the importance of an entry
"""
checklistCategory = models.ForeignKey(
'checklist.CheckListCategory', on_delete=models.SET_DEFAULT, default=1)
wikiEntry = models.ForeignKey(
......
......@@ -11,8 +11,29 @@
{% if checklist %}
<div class="grid-x grid-padding-x">
<div class="cell large-offset-3 large-6 content">
<div class="cell large-offset-3 large-6 content vertical-space">
<section>
<h1>Checkliste</h1>
<p>
Die Checkliste dient der selbst Kontrolle zur Einhaltung der
Barrierefreiheit.<br>
Die Liste dient vor allem als Leitfaden w&auml;hrend der
Entwicklung und beinhaltet von uns als besonders wichtig befundene
und empfohlene Richtlinien.
</p>
<p>
Ist eine Richtlinie implementiert, kann diese durch Verwendung des
roten "Offen" Buttons auf abgeschlossen gesetzt werden. Sollte
eine Richtlinie noch nicht vollst&auml;ndig implementiert sein,
oder bedarf weiterer Arbeit, kann dieser Schritt mit Hilfe des nun
gr&uuml;nen "Abgeschlossen" Buttons wieder r&uuml;ckg&auml;ngig
gemacht werden.<br>
Abgeschlossene Richtlinien werden im Local Storage des Browsers
gespeichert, es kann also der Tab, oder Browser, ohne bedenken
geschlossen werden. Beim erneuten Aufruf der Seite, werden diese
Richtlinien automatisch auf "Abgeschlossen" gesetzt.
</p>
</section>
<div id='checklist' class="grid-x grid-padding-x grid-padding-y grid-margin-y">
{% for category in checklist %}
<div class="cell cell-background-lg">
......
......@@ -5,7 +5,12 @@ from django.views import generic
from .models import CheckListCategory
class IndexView(generic.ListView):
"""
Default view for checklist page.
Passes date from models to checklist template.
"""
template_name = 'checklist/index.html'
context_object_name = 'checklist'
......
$(document).foundation();
// Call loadLocalStorage() on page load, to load existing data from local
// storage
document.addEventListener("DOMContentLoaded", function(event) {
loadLocalStorage();
});
// Json object to store checklist entries by their id
var checklistJson = {"entries" : {"entry_1": true,}};
// Toggles the state of a checklist entry on button click
function checkListToggle(element, checklistId) {
let completed = element.classList.contains("alert") ? true : false;
element.innerHTML = completed ? "Abgeschlossen" : "Offen";
......@@ -14,6 +18,8 @@ function checkListToggle(element, checklistId) {
updateLocalStorage(checklistId, completed);
}
// Updates local storage and adds, or changes, the state of an checklist entry
// within the local storage
function updateLocalStorage(checklistId, completed) {
let checklistJson = JSON.parse(localStorage.getItem('checklist'))
if (checklistJson === null) {
......@@ -24,6 +30,10 @@ function updateLocalStorage(checklistId, completed) {
localStorage.setItem('checklist', JSON.stringify(checklistJson));
}
// Checks local storage for existing checklist state.
// If a checklist entry was previously marked as complete, it gets completed
// automatically on page load to allow continious usage even if the tab
// or browser was closed.
function loadLocalStorage() {
let checklistJson = JSON.parse(localStorage.getItem('checklist'))
console.log(checklistJson);
......
......@@ -2,4 +2,7 @@ from django.views import generic
class IndexView(generic.TemplateView):
"""
Default view for welcome page
"""
template_name = 'welcome/index.html'
......@@ -2,6 +2,10 @@ from django.db import models
class WikiEntry(models.Model):
"""
Model for wiki entries.
allows queries for negative and positive examples.
"""
wikiTitle = models.CharField(max_length=200)
wikiText = models.TextField()
......@@ -19,6 +23,9 @@ class WikiEntry(models.Model):
class WikiExample(models.Model):
"""
Model for wiki example to be used for an wiki entry.
"""
wikiEntry = models.ForeignKey(
WikiEntry, on_delete=models.SET_NULL, null=True)
exampleTitle = models.CharField(max_length=200)
......
......@@ -6,7 +6,12 @@ from django.views import generic
from .models import WikiEntry, WikiExample
class IndexView(generic.ListView):
"""
Default view for wiki page.
Passes data from wiki models to wiki template.
"""
template_name = 'wiki/index.html'
context_object_name = 'wiki_list'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment