Backend

Chart-Design

Datenmodellierung

Design

Forschung

Frontend

Illustration

Kartografie

Konzeption

Lektorat

Programmierung

Projektmanagement

Storyboard

User Interface

Sensoren

barrierefreies PDF

Publikationspipeline

Diagramm-Visualisierung

Animation

Ausstellungsdesign

<p>Grafik &amp; Softwareentwicklung</p><p>Lekton ist eine Genossenschaft wahlverwandter Entwickler:innen und Designer:innen, ein gemeinschaftlicher Betrieb an der Schnittstelle von Technologie und Gestaltung.</p><p>Der Begriff <i>Lekton </i>– „die Bedeutung von Ausdrücken“ – kommt aus dem Griechischen und ist verwandt mit dem Deutschen „lesen“. Wörter werden wie Reisig gelesen, sei es, um Gedanken auszudrücken oder sie beim Lesen wieder einzusammeln.&nbsp;</p><p style="margin-left:0px;">Wir beschreiten den Weg zwischen Komplexität der Fragestellung und Klarheit der Darstellung.</p>

Lekton Genossenschaft

<p>Zusage für unser Projekt G’SCHEITER ARBEITEN 4.0 bei der Ausschreibung des Digitalisierungsfonds der AK Wien (2019) – Lekton evaluiert im Projekt digitale Werkzeuge für Beschäftigungsgenossenschaften in der IT- und Kreativ-Branche</p><p>&nbsp;</p><h2>Was ist der Digitalisierungsfonds der AK?</h2><p>Die Arbeiterkammer will in die Zukunft der Arbeitswelt investieren, indem sie Projekte fördert, die sich darauf fokussieren wie technologische Errungenschaften aus Sicht von ArbeitnehmerInnen zu qualitätvoller Arbeit beitragen können.</p><h2>Unsere Ziele</h2><p>Wir haben uns als ehemalige EinzelunternehmerInnen der IT- und Kreativbranche zu einer Beschäftigungsgenossenschaft zusammengeschlossen und wollen Informations- und Kommunikationstechnologien dafür nutzen, um unsere Arbeits- und Lebensqualität zu verbessern und gleichzeitig die Arbeitszeit zu reduzieren.</p><h2>Hintergrund</h2><p>(Neue) Selbstständige sind, wie andere atypisch Beschäftigte auch, sozial schlecht abgesichert und spezifischen Stressfaktoren ausgesetzt. Die Arbeitsqualität wird durch Faktoren wie unzureichende soziale Absicherung, die Notwendigkeit ständig verfügbar zu sein, Auftragsflauten und vieles andere mehr, beeinträchtigt. Die Selbstständigkeit als Einzelunternehmer oder Einzelunternehmerin bietet aber auch Vorteile wie beispielsweise freie Zeiteinteilung, selbstbestimmtes und ortsungebundenes Arbeiten und persönliche Entfaltungsmöglichkeiten.<br>Die Form der Beschäftigungsgenossenschaft ist eine Möglichkeit, soziale Sicherheit mit den Vorteilen der Selbstständigkeit in einem Feld mit hohem Innovationspotenzial zu verbinden.</p>

<h2>Konkrete Projekt-Vorhaben</h2><p>Wir wollen im Zuge des Projektes einen technologischen Werkzeugkoffer entwickeln und implementieren, der uns beim Erreichen unserer organisatorischen Ziele unterstützt. Diese IT Lösungen sollen auf Open Source Technologie basieren, damit wir die „Lizenz zum Teilen“ haben und ökonomische Einstiegshürden mit hohen Lizenzkosten vermeiden.</p><p>Der Werkzeugkoffer soll uns für unsere Zusammenarbeit und für die Entwicklung unserer Organisation folgendes ermöglichen:</p><ul><li>Nachhaltige Projektplanungsstrategien in innovationsorientierten Projekten</li><li>Internen Wissenstransfer und die Hebung von Wissensressourcen der einzelnen Genossenschaftsmitglieder</li><li>Datenaustausch für den mobilen Arbeitsplatz</li><li>Wissensorganisation</li><li>Klare Arbeitszeiterfassung</li><li>Individuelle Qualifikationsmaßnahmen</li></ul><p>Dieses Software-Paket wollen wir in Zukunft als Beratungs- und Implementierungsleistung neu gegründeten Beschäftigungsgenossenschaften anbieten können.</p><p>Weiters wollen wir in Zusammenarbeit mit FORBA aus arbeitssoziologischer Sicht eine Begriffsbestimmung von Arbeitsqualität in einer Beschäftigungsgenossenschaft vornehmen und die im Projekt erprobten Werkzeuge mit der Organisationsberatung accompany objektivieren und in Form eines Empfehlungskatalogs aufbereiten.</p><p>&nbsp;</p><p><a href="https://www.arbeit-wirtschaft.at/das-beste-beider-welten/" target="_blank" rel="noopener noreferrer"><u>Reportage:&nbsp;Das Beste beider Welten (Arbeit &amp; Wirtschaft, Oktober 2019)&nbsp;</u></a></p>

thumbnail_gscheiter_arbeiten_liniengrafik3.png

gscheiter_arbeiten_liniengrafik3.png

G’scheiter arbeiten 4.0

<p>Farben wirken auf intuitiver Ebene und haben einen unmittelbaren Einfluss darauf, wie Wahrgenommenes interpretiert wird. Bei Diagrammen sind Farben aber nicht nur Informationsübermittler, sondern auch Informationsträger: Sie werden eingesetzt, um Datengruppen voneinander zu unterscheiden, Datenwerte darzustellen oder sie hervorzuheben. In der Datenvisualisierung werden zwei Farbskalen unterschieden: die qualitative und die sequenzielle Skala. Die qualitative Skala wird eingesetzt, um Daten aus mehreren Kategorien optisch eindeutig voneinander zu trennen. Eine sequenzielle Skala kommt zur Verwendung, wenn es eine Kategorie mit Datenwerten unterschiedlicher Ausprägung gibt. Die Farbabstufungen sind dann den Wertegruppen entsprechend ihrer Größe zugeordnet. In der Praxis ist die Wahl des Farbschemas nicht immer eindeutig und es lohnt sich von Fall zu Fall zu hinterfragen, ob die Farbgebung die Lesbarkeit und den Kommunikationszweck eines Diagramms unterstützt.&nbsp;</p>

<h2>Sequenzielle Skalen</h2><p>Abgestufte Skalen sollten von der Anzahl der Farbtöne her nicht allzu umfangreich sein: 5-7 Farbtöne sind für Menschen optisch noch gut unterscheidbar.</p><figure class="image image-style-align-center"><div class="caption">&nbsp;</div><img src="/uploads/Verlauf_pink_ee03e6d50c.png"></figure><div class="caption">Abstufung von einem hellen zu einem dunklen Rot&nbsp;</div><figure class="image"><div class="caption">&nbsp;</div><img src="/uploads/farbabstufung_gruen_ddb0cd95c8.png"></figure><div class="caption">Abstufung zwischen zwei Farben, von einem hellen Gelb zu einem dunklen Grün</div>

<h3>Welche Farbskala ist geeignet? &nbsp;</h3><figure class="image"><div class="caption">&nbsp;</div><img src="/uploads/Wien_Bevoelkerungsdichte_Farben_d4fb5f58a6.jpg"></figure><div class="caption">Screenshot https://www.wien.gv.at/statistik/bezirke/ (14.3.2022), bearbeitet.&nbsp;</div><p>&nbsp;</p><p>Auf dieser Karte von Wien wird die Bevölkerungsdichte in den verschiedenen Wiener Bezirken visualisiert. Im linken Bild bekommt jeder Wertebereich eine eigene Farbe. Rechts sind die unterschiedlichen Gruppen von Werten in Farbtönen von Blau eingefärbt.</p><p>Bei den wiedergegebenen Daten fallen die Werte in einen Wertebereich der Bevölkerungsdichte, die in den einzelnen Bezirken variiert. Die abgestuften Farben von Hellblau bis Dunkelblau ermöglichen es, die unterschiedliche Dichte visuell zu unterscheiden. Die hellen Farben werden niedrigeren Werten und die dunklen höheren Werten zugeordnet.&nbsp;</p>

<h3>Welche Farbgebung ist besser geeignet? &nbsp;</h3><figure class="image"><div class="caption">&nbsp;</div><img src="/uploads/maedchennamen_both_0040e190b7.png"></figure><div class="caption">Anwendungsbeispiel einer sequenziellen Farbskala in einer Treemap (Erstellt mit ViennaViz (rechts bearbeitet)).</div><p>&nbsp;</p><p>Dunkle Farben haben mehr Gewicht als helle. Dementsprechend sollten die größeren Flächen dunkel und die kleineren hell eingefärbt werden. Im linken Beispiel wird die Wirkung der Flächen durch die Farbtöne verstärkt, im rechten konterkariert: Die kleinen Flächen bekommen durch die dunkle Farbgebung mehr Gewicht als sie eigentlich haben.&nbsp;</p>

<h2>Sequenziell divergierendes Farbschema</h2><figure class="image"><div class="caption">&nbsp;</div><img src="/uploads/divergent_scale_c19c16716f.png"></figure><div class="caption">Quelle: https://en.wikipedia.org/wiki/Cynthia_Brewer&nbsp;</div><p>&nbsp;</p><p>Beim sequenziell divergierenden Farbschema gibt es eine Art neutraler Mitte (zumeist die hellste Farbe) von der ein Verlauf nach zwei Seiten ausgeht. Diese Skala eignet sich für die Darstellung von zwei Extremen, die in den positiven und in den negativen Bereich führen. In der folgenden Weltkarte wird die Verteilung von Armut und Reichtum mittels dieser Farbskala visualisiert. &nbsp;</p><figure class="image image_resized" style="width:75%;"><div class="caption">&nbsp;</div><img src="/uploads/Countries_by_mean_wealth_per_adult_in_2018_6fa942093c.png"></figure><div class="caption">Quelle: https://upload.wikimedia.org/wikipedia/commons/9/9c/Countries_by_mean_wealth_per_adult_in_2018.png&nbsp;</div>

<h2>Farbverlauf&nbsp;</h2><p>Eine abgestufte Palette mit einer bestimmten Anzahl von Farben nennt man klassifiziert. Die einzelnen Farben werden Wertebereichen zugeordnet. Durch diese Gruppierung kann ein Diagramm visuell vereinfacht werden.&nbsp;</p><p>Es kann aber sinnvoll sein, Daten in ihrer maximalen Komplexität sichtbar zu machen, dann ist ein Farbverlauf die bessere Wahl. Diese Farbschema wird als sequenziell unklassifiziert bezeichnet.&nbsp;</p><figure class="image"><div class="caption">&nbsp;</div><img src="/uploads/farbverlauf_4ee96d3c2d.png"></figure><p>Durch die Verwendung eines Farbverlaufs bleiben auch subtile Unterschiede erhalten. &nbsp;Als Beispiel eine Heatmap der 7-Tage-Inzidenz vom 20. März bis zum 24. April 2022. Durch die detaillierte Farbwiedergabe wird eine differenzierte Betrachtung ermöglicht und ein fein granuliertes Muster erkennbar.&nbsp;</p><figure class="image image_resized" style="width:75%;"><div class="caption">&nbsp;</div><img src="/uploads/7_Tage_Inzidenz_0821991715.png"></figure><div class="caption">Screenshot der 7-Tage-Inzidenz nach Altersgruppen: https://orf.at/corona/daten/oesterreich (am 21.7.2022)</div><p>&nbsp;</p><h3>Nützliche Links:</h3><p><a href="https://learnui.design/tools/data-color-picker.html   " target="_blank" rel="noopener noreferrer">Learn UI Design - Browserbasierte Applikation zum Erstellen sequenzieller Paletten</a></p><p><a href="https://colorbrewer2.org/" target="_blank" rel="noopener noreferrer">Fertige Farbkskalen (für Choroplethen gestaltet) auf ColorBrewer&nbsp;</a>&nbsp;</p>

<h2>Qualitative Farbskala</h2><p>Eine qualitative Farbskala ist eine Farbzusammenstellung aus mehreren verschiedenen Farben. Mit diesen spezifischen Farben lassen sich Gruppen voneinander unterscheiden, die keine bestimmte Reihenfolge haben.&nbsp;</p><figure class="image"><div class="caption">&nbsp;</div><img src="/uploads/farbskale_Okabe_Ito_5070b9837e.png"></figure><div class="caption">Es gibt erprobte Farbskalen, die auch für farbenblinde Menschen geeignet sind, wie beispielsweise die von Masataka Okabe and Kei Ito&nbsp;</div><figure class="image"><div class="caption">&nbsp;</div><img src="/uploads/farbskale_brewer_e9f4132891.png"></figure><div class="caption">Und von Color-Brewer - mit gesättigten Farben</div><figure class="image"><div class="caption">&nbsp;</div><img src="/uploads/farbskale_brewer_pasetell_eb701501a9.png"></figure><div class="caption">und in Pastelltönen</div>

<h2>Mit Farben Akzente setzen</h2><p>Wenn alle Farben die gleiche Intensität haben, entsteht ein gleichwertiger Eindruck. Sollen einzelne Merkmale hervorgehoben werden, kann eine Kombination aus gesättigten und weniger gesättigten oder von helleren und dunkleren Farben verwendet werden.&nbsp;</p><figure class="image"><div class="caption">&nbsp;</div><img src="/uploads/farbakzente_877a3cadfe.png"></figure>

<h2>Farbpalette erstellen</h2><p>Für die optimale Farbauswahl einer selbst gestalteten Farbpalette gibt es kein Patentrezept, aber ein paar Möglichkeiten, systematisch an die Sache heranzugehen. &nbsp;Je nachdem wie viele Farben zum Einsatz kommen sollen, können aus einem Farbkreis in gleichen Abständen Farben herausgenommen werden. Wie oft der Farbkreis unterteilt wird, hängt von der Anzahl der Farben ab, die benötigt werden.&nbsp;</p><p>Auch nebeneinander liegende Farben lassen sich kombinieren, z.B. Rottöne oder Blautöne. Sie ergeben weniger kontrastreiche Skalen. &nbsp;</p><p>&nbsp;</p><h3>Nützliche Links zum Erstellen individueller Farbpaletten:</h3><p>Webseiten, die beim Erstellen von qualitativen Farbpaletten Ideen liefern: <a href="https://coolors.co/palettes/trending" target="_blank" rel="noopener noreferrer">Coolers</a> oder <a href="https://www.colorhunt.co/" target="_blank" rel="noopener noreferrer">Colorhunt</a> &nbsp; &nbsp;</p><p>Die Webanwendung <a href="https://color.adobe.com/de/create/color-wheel" target="_blank" rel="noopener noreferrer">Adobe Color</a> bietet vorgefertigte Farbpaletten und die Möglichkeit eigene Farbkombinationen auszuprobieren oder aus Fotos zu extrahieren. &nbsp;</p>

<h2>Farben und Barrierefreiheit&nbsp;</h2><p>Menschen mit einer Sehschwäche können an der Wahrnehmung eines Diagramms scheitern, wenn es Farben aufweist, die für sie nicht klar unterscheidbar sind. Es gibt Webseiten, die detaillierte Infos zu diesem Thema bieten, als Daumen mal Pi Regel kann gelten, dass Farben, wenn sie in Graustufen umgewandelt werden, immer noch unterscheidbar sein sollten. Die Website <a href="https://www.color-blindness.com/coblis-color-blindness-simulator/ " target="_blank" rel="noopener noreferrer">Coblis</a> - Coblis steht für Color Blindness Simulator – simuliert anhand einer hochgeladenen Bildquelle, wie diese für Menschen aussieht, die farbenblind sind oder nur monochrome Farben sehen können.&nbsp;</p><p>&nbsp;</p><p>Ich habe diesen Farbkeil auf Coblis hochgeladen: &nbsp;</p><figure class="image"><div class="caption">&nbsp;</div><img src="/uploads/farbkeil_cb1_6c945df163.png"></figure><p>&nbsp;</p><p>Und folgendes Ergebnis bekommen: So sieht meine Farbskala für Menschen aus, die nur hell/dunkel unterscheiden können:&nbsp;</p><figure class="image image_resized" style="width:50%;"><div class="caption">&nbsp;</div><img src="/uploads/farbkeil_cb_Test_62880e25c2.png"></figure><div class="caption">Die Grauabstufungen im linken Bereich weisen gute Kontraste auf (ursprüngliche Grüntöne), die hellen Grautöne des ursprünglich gelben Bereichs liegen sehr nahe beieinander und lassen sich kaum unterscheiden. Diese Farben sollten optimiert werden, damit sie auch in Schwarz/Weiß genügend Kontrast aufweisen. &nbsp;</div>

<h2>Quellen &nbsp;</h2><p>Datenvisualisierung Grundlagen und Praxis, Claus O. Wilke (O‘Reilly), 2019&nbsp;<br>Kompendium der Mediengestaltung: I Konzeption und Gestaltung, Joachim Böhringer, Patrick Schlaich, Peter Bühler, Dominik Sinner (Springer), 2013&nbsp;<br><a href="https://blog.datawrapper.de/which-color-scale-to-use-in-data-vis/ " target="_blank" rel="noopener noreferrer">https://blog.datawrapper.de/which-color-scale-to-use-in-data-vis/&nbsp;</a><br><a href="https://colorbrewer2.org/#type=sequential&amp;scheme=BuGn&amp;n=3 " target="_blank" rel="noopener noreferrer">https://colorbrewer2.org/#type=sequential&amp;scheme=BuGn&amp;n=3&nbsp;</a><br><a href="https://www.color-blindness.com/coblis-color-blindness-simulator/ " target="_blank" rel="noopener noreferrer">https://www.color-blindness.com/coblis-color-blindness-simulator/&nbsp;</a></p>

<h2>Kontakt</h2><p>Für Fragen stehe ich gerne zur Verfügung:&nbsp;</p><p>Gabi Damm&nbsp;<br><a href="tel:+4369911022359" target="_blank" rel="noopener noreferrer">+43 699 110 22 359</a><br><a href="maito:gabi.damm@lekton.at" target="_blank" rel="noopener noreferrer">gabi.damm@lekton.at</a>&nbsp;</p>

thumbnail_20220721_verlauf.jpg

20220721_verlauf.jpg

Farben und Diagramme

<h2>Was nehme ich als Zuhörende von einer Präsentation mit? Welche Ansprüche stelle ich an meine eigene Präsentation? Wie gehe ich bei der Visualisierung vor? Welche bewährten Tipps zur Gestaltung von Folien werden in der Ratgeberliteratur empfohlen?</h2><p>&nbsp;</p><h2>Bilder</h2><p>In der Ratgeberliteratur gilt als erstes und oberstes Prinzip, möglichst viele Bilder zu verwenden und sie möglichst großflächig auf den Folien zu platzieren. Bilder dienen als visueller Anker für die präsentierten Inhalte. Obwohl die Verwendung von Bildern empfohlen und von Vortragenden als wesentlich angesehen wird, werden sie dennoch selten verwendet. Der Großteil der Präsentationen, zumindest von denen, die ich gesehen habe, bestand aus Textfolien mit Aufzählungspunkten. Das Finden geeigneter Fotos oder Illustrationen kann sich als schwierig und sehr zeitaufwendig gestalten. Die Suche in Bilddatenbanken erweist sich oft als frustrierend, da die meisten Stockfotos glatt und austauschbar wirken, Bilder mit individuellem Charakter sind Mangelware. Bei abstrakten Themen kann es zielführender sein, Illustrationen oder Icons zur visuellen Unterstützung einzusetzen.</p>

<h2>Schriften</h2><p>In den meisten Präsentationen wird die standardmäßig von Microsoft verwendete Schriftart, nämlich die Calibri, beibehalten. Dadurch ähneln sich Präsentationen oft sehr. Dabei stehen auf jedem Computer zahlreiche andere Schriftarten zur Verfügung, und es ist kein großes Problem, eine neue Schrift auf einem Computer zu installieren. Eine gute Quelle für Schriften ist beispielsweise die Website von Google Fonts, hier stehen eine Vielzahl von Schriftarten kostenlos zum Download zur Verfügung. Durch den Einsatz einer charaktervollen Schriftart kann sich eine Präsentation optisch abheben und es bietet sich an mit Schrift zu gestalten und gelegentlich einmal nur ein Wort oder ein Zitat auf einer Folie durch eine spezielle Schriftart hervorzuheben und visuell zu betonen.</p><h2>Farben</h2><p>Farben spielen neben den Schriften eine entscheidende Rolle als Gestaltungsmittel. Sie wirken auf einer unbewussten Ebene und transportieren Emotionen auf direkte Weise. Farbige Hintergründe können Akzente setzen und Aufmerksamkeit erzeugen. Eine moderne und gut lesbare Variante der Foliengestaltung besteht darin, den Text in Weiß auf einem dunklen Hintergrund zu platzieren. Zudem können dezente Elemente auf den Folienhintergrund gesetzt werden, um der Folie Struktur zu verleihen und so dem Auge eine angenehme Abwechslung zu bieten.</p>

<h2>Layout</h2><p>Wenn in einer Präsentation hauptsächlich Text oder Aufzählungspunkte verwendet werden, kann ein abwechslungsreiches Layout mit unterschiedlicher Spalten -anzahl und -aufteilung für eine vielfältige Gestaltung sorgen. Eine harmonische visuelle Linie, die sich durch das Design der Folien zieht, verleiht der Präsentation ein einheitliches Erscheinungsbild und sorgt für visuelle Kontinuität.</p><h2>Folienübergänge und Animationen</h2><p>Folienübergänge und Animationen verleihen der Präsentation eine dynamische Note und lassen sie lebendiger erscheinen. Beim Wechseln von einer Folie zur nächsten können subtile Animationen wie das "Schieben" einen fließenden Übergang schaffen. Insbesondere das Zoomen eignet sich gut für das Inhaltsverzeichnis, da es ermöglicht, in den Inhalt hineinzuzoomen und anschließend automatisch zum Verzeichnis zurückzukehren, sobald ein Kapitel abgeschlossen ist. Durch den Einsatz solcher Effekte kann eine ansprechende Präsentationsdynamik entstehen.</p><p>&nbsp;</p><p>Wenn Sie Fragen zum Thema Präsentation haben, stehe ich Ihnen gerne zur Verfügung. Zögern Sie nicht, mir zu schreiben (<a href="mailto:gabi.damm@lekton.at" target="_blank" rel="noopener noreferrer">gabi.damm@lekton.at</a>) oder rufen Sie mich an: <a href="tel:+4369911042359" target="_blank" rel="noopener noreferrer">+4369911042359</a></p>

thumbnail_PPP_story_Coverimage.png

PPP_story_Coverimage.png

Power up PowerPoint

<h3>Kunde</h3><p>ecop, ein Unternehmen, das mit einer neuartigen, mehrfach patentierten Technologie Rotations-Wärmepumpen für den industriellen Einsatz herstellt.</p><h3>Aufgabenstellung</h3><p>Erstellen einer browserbasierten Schnittstelle zu einem Simulationstool für die Berechnung des Effizienzgrades (COP) einer Wärmepumpe. Zur Berechnung sollten mehrere Werte über Schieberegler eingegeben werden können. Die Wertebereiche der einzelnen Regler sollten teilweise voneinander abhängig sein. Das Simulationstool wurde von ecop als Excel Spreadsheet unter Verwendung der Optislang Optimierungslibrary entwickelt.</p><p>Es sollte zwei Arten der Berechnung geben: eine einfache Berechnung in Echtzeit, die einen Näherungswert ausgibt und eine optimierte Berechnung für einen genauen COP. Die Berechnung sollte in Excel erfolgen. Die Schnittstelle sollte in die bestehende WordPress Webseite integriert werden.</p><h3>Design</h3><p>Die Gestaltung der Schieberegler erfolgte iterativ. Wir begannen mit einer skizzenhaften Visualisierung, um die Skalen und Wertebereiche zu veranschaulichen. Im Prozess bis zur fertigen Gestaltung wurden die Skalen verfeinert und die Abhängigkeiten definiert.</p><h3>User Interface – Eingabe der Werte mittels Schiebereglern</h3><p>Das Aussehen der Schieberegler setzten wir mittels HTML und CSS um. Die Schieberegler sind responsiv. Die JQuery User Interface Library und die Tooltips Library helfen bei der Eingabe der Werte. Das User Interface erzwingt eine gültige Eingabe, indem beim Verschieben eines Reglers die anderen mitgezogen werden. So wird das Einhalten von Konsistenzkriterien ermöglicht und die Anzahl der inkonsistenten Eingaben so gering wie möglich gehalten.</p><h3>User Interface – Ausgabe eines COP und Visualisierung als Graph</h3><p>Der COP wird als numerischer Wert ausgegeben, parallel dazu wird eine Graphik angezeigt. Das Zeichnen des Graphen erfolgt mittels der D3 library. D3.js ist eine JavaScript-Bibliothek zum Erstellen dynamischer, interaktiver Datenvisualisierungen im SVG Format. D3.js erzeugt Vektorgrafiken, die responsiv und beliebig skalierbar sind.</p><h3>Programmierung Backend</h3><p>Ein für das Projekt entwickeltes WordPress Plugin übernimmt die Daten der Schieberegler über eine Ajax-Schnittstelle und übermittelt sie an einen Simulationsserver. Der Simulationsserver (ein Windows Rechner) stößt die Berechnung im Excel Spreadsheet mit Hilfe einer ebenfalls für das Projekt entwickelten C# Schnittstelle an. Es wird zwischen zwei Arten der Berechnung unterschieden:</p><ul><li>Die einfache Berechnung, die nur einfache Excel Routinen bzw. Optislang verwendet. Sie dauert etwa 2 Sekunden, so dass die Ausgabe der Ergebnisse im Webbrowser interaktiv möglich ist.</li><li>Die aufwändigere Berechnung. Hier wird zusätzlich der Excel Solver verwendet. Die Berechnung kann mehrere Stunden dauern, das Ergebnis wird dem Benutzer als PDF Datei per Mail übermittelt. Vor dem Beginn der aufwändigeren Berechnung werden vom Benutzer zusätzliche Informationen, wie Name und Mailadresse abgefragt.</li></ul><h3>&nbsp;</h3>

<figure class="image"><img src="/uploads/ecop_COP_Schieberegler_54478e49f9.png"></figure><h3>&nbsp;</h3><h3>Größte Herausforderungen</h3><p>Frontendseitig war es die Entscheidung, ob wir reine HTML5 Schieberegler verwenden können (und dadurch standardkonform bleiben) oder ob die Umsetzung stärker auf bestehende Libraries aufbauen sollte (um Cross-Browser-Fähigkeit zu gewährleisten). Beide Wege wurden beschritten und verglichen.&nbsp;Aufgrund der komplexen Designanforderungen haben wir uns für die zweite Variante entschieden.</p><p>Backendseitig war die Excel Schnittstelle die größte Herausforderung, weil in ihr die COM und .NET Welten zusammenkommen.</p><p>&nbsp;</p><p><i>Andreas Längauer, Projektleiter ecop</i></p><p><i>„Die Zusammenarbeit mit Lekton war sehr gut und eng. Unsere Anforderungen und Vorstellungen wurden in einem konstruktiven Austausch weiterentwickelt und Lekton brachte wertvolle Ideen ein. Dadurch ist eine Lösung entstanden, die unsere Erwartungen übertrifft und mit der wir höchst zufrieden sind.“</i></p><p><a href="http://www.ecop.at/de/simulation/"><u>www.ecop.at/de/simulation/</u></a></p>

medium_ecop_COP_Schieberegler.png

small_ecop_COP_Schieberegler.png

thumbnail_ecop_COP_Schieberegler.png

ecop_COP_Schieberegler.png

COM und .NET Welten kombinieren

<p>Wir möchten hier ein Werkzeug vorstellen, das kleinen Firmen, Einpersonen-Unternehmen und anderen das Arbeiten von zu Hause erleichtert bzw. ermöglicht.</p><p><strong>Gerne helfen wir auch beim Installieren! </strong>Anfrage bitte an: <a href="mailto:mail@lekton.at"><u>mail@lekton.at</u></a></p><p>&nbsp;</p><h2>Nextcloud</h2><p><strong>Open Source Cloud für Dokumente und Filesharing</strong></p><p>Die Open-Source-Cloud <a href="https://nextcloud.com/"><u>Nextcloud</u></a> ist eine Cloud zum Selber-Hosten für die gemeinsame Dokumentenablage oder zum Teilen, von der Funktionalität her vergleichbar mit Dropbox.</p><p><strong>ACHTUNG</strong>: Nextcloud synchronisiert Dateien zwischen lokalen Rechnern und dem Cloudserver ist aber <strong>KEINE BACKUPLÖSUNG</strong>, weil auch Löschungen synchronisiert werden. (Backups müssen zusätzlich gemacht werden)</p><p>&nbsp;</p><p>Wir beschreiben im Folgenden eine einfache Installationsmöglichkeit unter Linux Ubuntu (Version LTS 18.4) mit dem Programm Snap.</p><h3>Cloudsever mieten und Zugang bekommen</h3><p>Zuerst braucht man einen Server, auf dem die Nextcloud installiert werden kann. Wir haben gute Erfahrungen mit dem Provider Hetzner, der z.B. eine <a href="https://www.hetzner.de/cloud"><u>Cloud mit Platz für 20 Gigabyte</u></a> um 2,96 € pro Monat anbietet (Stand 16.3.2020). Es gibt aber auch genügend andere Provider. Voraussetzung ist, dass der Provider vollen Root-Zugriff auf den Server gewährt und Verbindungen mit SSH (Secure Shell) anbietet.</p><h4>Schritte</h4><ol><li>Account beim Provider registieren</li><li>Cloud kostenpflichtig bestellen</li><li>Betriebssystem wählen (z.B. Ubuntu 18.04 LTS – Long Term Support)</li><li>SSH-Root-Zugang anfordern bzw. selbst einrichten (je nach Provider)</li></ol><p>Für eine sichere Verbindung zur Cloud braucht man außerdem eine Webdomain (z.B. „meine_domain.com“) und für diese Domain oder eine Subdomain eine SSL-Verschlüsselung über https (z.B. „https://cloud.meine_domain.com“):</p><ul><li>Webdomain beim Provider registrieren (z.B. „meine_domain.com“)</li><li>Dann einen sogenannten DNS-Eintrag für die domain oder Subdomain der zukünftigen Cloud anlegen (z.B. „cloud.meine_domain.com“)</li></ul><p>Die weiteren Schritte gehen davon aus, dass am künftigen Cloudserver Ubuntu 18.04 als Betriebssystem installiert ist und Root-Zugriff per SSH vorhanden ist.</p>

<h3>Nextcloud downloaden und installieren</h3><p>Eine einfache Installationsvariante mit dem (mit Ubuntu 18.04) mitgelieferten Programm Snap findet sich hier in der Nextcloud-Doku für Admins:</p><p><a href="https://docs.nextcloud.com/server/18/admin_manual/installation/source_installation.html#installing-via-snap-packages"><u>https://docs.nextcloud.com/server/18/admin_manual/installation/source_installation.html#installing-via-snap-packages</u></a></p><p>Die Schritte zusammengefasst:</p><ul><li>Login auf dem künftigen Cloudserver per SSH</li><li>In der Kommandozeile: <code>sudo snap install nextcloud</code></li></ul><p>Nach der Installation ist es nötig einen Admin-User einzurichten, das geht (unter anderem) auch mit der Kommandozeile (beides notieren):</p><ul><li><code>sudo nextcloud.manual-install username_fuer_admin passwort_fuer_admin</code></li></ul><p>Trusted Domain einrichten (ebenfalls über die Kommandozeile, z.B.):</p><ul><li><code>sudo snap run nextcloud.occ config:system:set trusted_domains 1 --value=cloud.meine_domain.net</code></li></ul><p>&nbsp;</p><h3>Nextcloud mit SSL verschlüsseln</h3><p>Für eine sichere Verbindung ist es wichtig, die Nextcloud mit SSL zu verschlüsseln, damit andere nicht mitlesen können:</p><p>Wieder in der Kommandozeile:</p><p><code>sudo nextcloud.enable-https lets-encrypt</code></p><p>… und dem Anweisungen folgen, bis zur Meldung „Restarting apache… done“</p><p>Wenn alles geklappt hat, sollte der Login-Screen für die neue Cloud jetzt aufrufbar sein, z.B. unter „https://cloud.meine_domain.com“.</p><p>Login mit oben vergebenem „username_fuer_admin“ und dem „passwort_fuer_admin“</p><p>Nach dem Login erscheint ein Willkommensscreen mit der Möglichkeit sich das Desktop- oder Mobile-Programm für die Nextcloud lokal zu laden und zu installieren.</p><p>Damit hat man die Möglichkeit, Dateien auf dem lokalen Rechner mit der Cloud synchron zu halten. Wer das nicht möchte, kann die Nextcloud auch ausschließlich über die Weboberfläche bedienen.</p><p>Auf der Weboberfläche lassen sich weitere User und Gruppen anlegen, Ordner erstellen, Rechte für User und Gruppen vergeben, Ordner veröffentlichen und noch mehr.</p>

medium_800px-Nextcloud_15.0.2_Screenshot.png

small_800px-Nextcloud_15.0.2_Screenshot.png

thumbnail_800px-Nextcloud_15.0.2_Screenshot.png

800px-Nextcloud_15.0.2_Screenshot.png

Home-Office-Tool – Nextcloud

<h2>Datenvisualisierung</h2><p>Daten in einer leicht verständlichen und grafischen Form zu präsentieren, wird bei ständig wachsenden Datenmengen eine zunehmende Herausforderung in Unternehmen, in der Forschung und bei öffentlichen Stellen. Um die Bedeutung, die sich in Daten befindet, herauszuarbeiten und verständlich zu machen, werden sie in Form von Diagrammen und Karten dargestellt.</p><h2>ViennaViz</h2><p>Die Stadt Wien macht Daten zugänglich, die für die Bevölkerung von großem Interesse sind. Lekton hat mit ViennaViz eine browserbasierte Applikation entwickelt mit der Diagramme erstellt, gestaltet, gespeichert und eingebettet werden können. Die Benutzer:innen der Applikation sind flexibel in der Auswahl der Daten und der Form der Darstellung (Karte, Säulen, Balken …).</p><p>Fertige Diagramme können mittels iframe auf einer Website eingebettet werden, ein paar Beispiele:</p><ul><li><a href="https://wien1x1.at/site/bev-entwicklung-3/" target="_blank" rel="noopener noreferrer"><u>Wien 1 x 1.at zur Bevölkerungsentwicklung der Stadt (2018-2048)</u></a></li><li><a href="https://wien1x1.at/site/bevoelkerungsentwicklung-2019/" target="_blank" rel="noopener noreferrer"><u>Wien wächst gemächlich: vorläufige Daten der Bevölkerungsentwicklung 2019.</u></a></li><li><a href="https://www.wien.gv.at/statistik/bevoelkerung/bevoelkerungsstand/index.html" target="_blank" rel="noopener noreferrer"><u>Wiener Bevölkerungsstand</u></a></li></ul>

<h2>Wirkungsmonitoring</h2><p>Die Wirkungscontrollingstelle des Bundes eröffnet allen Bürger:innen zweimal im Jahr einen aktualisierten Einblick in die Datenwelt der Verwaltung der obersten Organe im Staat (Ministerien, Parlamentsdirektion, Volksanwaltschaft, usw.). Es handelt sich um zwei zeitversetzte Berichte aus den Bereichen Wirkungsorientierung und wirkungsorientierte Folgenabschätzung, die unter einander verbunden sind. Über die Jahre festgelegte Ziele (Wirkungsziele, Kennzahlen, Budgetmaßnahmen) werden mehr oder weniger erfüllt und diese Evaluierungsdaten der Öffentlichkeit transparent kommuniziert. 2015/2016 hat Lekton dafür einen automatisch generierten Onlinebericht entwickelt. Auf der Website <a href="https://wirkungsmonitoring.gv.at/"><u>Wirkungsmonitoring</u></a> gibt es als Einstieg eine dynamische Abwandlung eines radialen Baumdiagramms. Im Hintergrund verknüpft Lekton die Daten aus beiden Berichten der Wirkungscontrollingstelle mit den bestehenden Daten aus vorigen Jahren zu einem Graphen. Es wird immer nur ein Teil dieses Graphen dargestellt, um der üblichen Unübersichtlichkeit bei Netzwerkdiagrammen entgegen zu wirken. Interessierte können diese Daten aber wie in einem “Tauchgang” interaktiv erforschen. Zu jedem Wirkungsziel und zu jeder Maßnahme gibt es darüber hinaus eigene generierte Webseiten, die die Erfolgskriterien, inklusive Zeitreihendiagrammen der Entwicklung über die Jahre, in einer eigens entwickelten graphischen Sprache möglichst einfach offen legen. Seit vielen Jahren wächst nun dieser komplexe Bericht automatisch, belastbar und resilient.</p>

<h2>Die Zukunft der Stadt weiter_gedacht_</h2><p>Im Rahmen der Sonderaustellung „Die Zukunft der Stadt. weiter_gedacht_“ im Technischen Museum Wien hat Lekton animierte Visualisierungen zu kuratorisch ausgewählten Themen der Ausstellung auf Basis von Open Data-Quellen verschiedener Metropolen gestaltet. Die Visualisierungen wurden in einem Black-Cube auf dem Dach des Sonderaustellungsgebäudes gezeigt.</p><p><span style="background-color:rgb(255,255,255);color:rgb(26,32,44);">Daten sind </span><i>per se</i><span style="background-color:rgb(255,255,255);color:rgb(26,32,44);"> immateriell, eine Abstraktion. So wurde eine Datenvisualisierung entwickelt, die sich bewusst vom Rest der Ausstellung abhebt. Wie in einem “kartesischen Theater” (im Kopf eines Beobachters sitzt ein kleinerer Betrachter und sieht als Homunkulus, was so durch die Augen des Ersten kommt) besinnen sich die Besucher:innen und wachsen gleichzeitig über sich hinaus. Vom hier und jetzt in der Umgebung des Technischen Museums führt die interaktive Präsentation in einer Schleife in den Weltraum, dann in eine globale Überschau und schließlich über die Daten aus europäischen Städten zurück an den Ursprung: Sensoren, welche in Echtzeit Temperatur, CO2-Gehalt oder Luftfeuchtigkeit im Ausstellungsbereich messen. Man sieht unterschiedliche Grafiken auf zwei Bildschirmen. Diese Bilder ergänzen sich. Hinter jedem “Hauptbild” kann darüber hinaus ein “Gegenschuss” über einen Touch-Screen ausgewählt werden. Hinter Daten verstecken sich weitere Daten: Diebstähle hinter Besitzverhältnissen oder eine Bevölkerungsentwicklung, die in Wien mit den historischen Verläufen der Donau und den Energieflüssen in der Stadt korrespondiert. Die Interaktion ist minimal gehalten, so dass auch bei größerem Andrang die meditative Stimmung und die Reflexion über die Daten nicht gebrochen werden. Was haben uns Daten eigentlich zu sagen? Das muss jede für sich entscheiden.</span></p>

<h2>genderATlas</h2><p>Der genderATlas ist ein Online-Atlas, der Daten, Indikatoren und Informationen zu den lebensweltlichen Realitäten von Frauen und Männern interaktiv aufbereitet und visualisiert. So kann man beispielsweise sehen, dass in Österreich <a href="http://genderatlas.at/articles/qualifizierte.html" target="_blank" rel="noopener noreferrer"><u>viele hochqualifizierte Frauen</u></a> leben, sich das aber nicht im <a href="http://genderatlas.at/articles/einkommen.html" target="_blank" rel="noopener noreferrer"><u>Einkommen</u></a> niederschlägt und sie auch in der <a href="http://genderatlas.at/articles/buergermeisterinnen.html" target="_blank" rel="noopener noreferrer"><u>heimischen Politik</u></a> unterrepräsentiert sind. Das Projekt wurde von Lekton-Mitglied Manuela Schmidt in ihrer Zeit als TU-Wien-Forschungsassistentin initiiert und geleitet.</p><ul><li><a href="http://genderatlas.at/articles/strassennamen.html" target="_blank" rel="noopener noreferrer"><u>Straßennamen in Wien</u></a></li><li><a href="http://genderatlas.at/articles/buergermeisterinnen.html" target="_blank" rel="noopener noreferrer"><u>Bürgermeisterinnen in Österreich</u></a></li><li>Im <a href="http://genderatlas.at/schule/" target="_blank" rel="noopener noreferrer"><u>genderATlas für die Schule</u></a> sind Beiträge so aufbereitet, dass eigenständiges Forschen angeregt und ermöglicht wird, z.B. <a href="http://genderatlas.at/schule/articles/frauenfussball-1.html" target="_blank" rel="noopener noreferrer"><u>Frauenfußball für Sekundarstufe 1</u></a>, <a href="http://genderatlas.at/schule/articles/frauenfussball-2.html#7/47.721/13.342" target="_blank" rel="noopener noreferrer"><u>Frauenfußball für Sekundarstufe 2</u></a></li></ul><p>&nbsp;</p>

<h2>Können wir besser wohnen?</h2><p>Angelehnt an den österreichischen Pionier in der Datenvisualisierung, Otto Neurath, ist diese Animation zur Darstellung der Wohnsituation in Wien im frühen 20. Jahrhundert. Otto Neurath hat Zahlen und Fakten über eine reduzierte und schöne Gestaltung einem breiten Publikum zugänglich gemacht.</p><p>Lekton Mitglied Max Limbeck gemeinsam mit David Eisl, Lenja Gathmann, Günther Hauser, Max und Christoph Limbeck-Lilienau, Luz Olivares Capelle, Damaris Richerts, Theda Schifferdecker, Alexander Tschernek, Mirjam Unger</p>

large_wirkungsmonitoring1.png

medium_wirkungsmonitoring1.png

small_wirkungsmonitoring1.png

thumbnail_wirkungsmonitoring1.png

wirkungsmonitoring1.png

Daten verstehen leicht gemacht

<p><strong>In Österreich gibt es die Gesellschaftsform der Genossenschaft seit etwa 150 Jahren. Als Unternehmensform ist sie relativ flexibel und auch der Gründungsprozess ist überschaubar. Kurz zusammengefasst, es braucht: Zumindest zwei Personen, ein geringes Gründungskapital, einen Revisionsverband und eine Satzung, in der die inhaltliche Ausrichtung festgeschrieben wird.&nbsp;</strong></p><p>&nbsp;</p><h2>Unsere Geschichte</h2><p>Vor der Gründung waren wir Gründungsmitglieder selbstständige Einpersonenunternehmer:innen und brachten unsere Erfahrungen und auch unsere Eigenheiten in die Genossenschaft mit ein. Von der Buchhaltung über Marketing, Kundenkommunikation bis hin zu unseren je eigenen Tätigkeit als Grafiker:innen und Programmierer waren wir gewohnt, alles selber zu machen. Nun konnten und durften wir Dinge aus der Hand geben und konnten uns gegenseitig komplementieren.&nbsp;</p><h2>Erfahrung, Wissen und Netzwerke&nbsp;</h2><p>Wir brachten unsere Kompetenzen, Kund*innen und Erfahrungen in die Genossenschaft ein. Die neue Organisationform bot die Möglichkeit zum Austausch. Das wirkte sich positiv auf den Einzelnen und die Genossenschaft aus: Vorhandene Fähigkeiten und Kompetenzen wurden transparent, unser Portfolio wurde spezifischer, neue Ideen entstanden.&nbsp;</p><h2>Geht es den Mitglieder gut, geht es der Genossenschaft gut&nbsp;</h2><p>Die Genossenschaft soll das wirtschaftliche Fortkommen ihrer Mitglieder fördern. Lekton ist als Erwerbsgenossenschaft vor allem die soziale Absicherung ihrer Mitglieder durch ein Dienstverhältnis ein großes Anliegen. Die demokratische Basis der Organisationsstruktur erlaubt Mitbestimmung und Kontrolle.&nbsp;</p><h2>Genossenschaftsmitglied werden</h2><p>Genossenschaftsmitglied kann werden, wer relativ ähnlich aufgestellt ist. Ehemalige Einpersonenunternehmer:innen, die entweder das gleiche machen wie wir oder aus benachbarten Berufsfeldern kommen: Synergieeffekte ausdrücklich erwünscht!</p>

<figure class="image"><div class="caption">&nbsp;</div><img src="/uploads/rueckenwind_lekton_87de83d2f8.png"></figure><div class="caption">Rückenwind Zeitung zum Tag der Genossenschaft</div>

small_00imZentrum4.png

thumbnail_00imZentrum4.png

00imZentrum4.png

Die Mitglieder im Zentrum

<p>Das Berichte-Framework der Stadt Wien ermöglicht die automatisierte Erstellung von barrierefreien und mobil-tauglichen Online-Publikationen mit Hilfe strukturierter Word-Dokumente. Die Applikation wurde von Lekton im Auftrag der MA 53 – Presseinformationsdienst (PID) entwickelt und steht seit Jänner 2023 in der Version 1.0 Dienstleistern im Auftrag der Stadt Wien zur Verfügung.&nbsp;</p><p>Das Berichte-Framework ist für abgeschlossene Publikationsformate optimal: In der Stadt Wien werden zahlreiche solcher Publikation erstellt, deren Inhalte sich nach der Veröffentlichung nicht mehr ändern und die auch online verfügbar gemacht werden müssen z. B. gesetzlich vorgeschriebene Jahresberichte, längerfristig geltende Richtlinien, Strategiepapiere, Festschriften etc.&nbsp;</p><p>Solche Publikationen müssen den gesetzlich vorgeschrieben Kriterien der Barrierefreiheit genügen und können grundsätzlich entweder als Webpublikationen mittels Content Management System (CMS), als barrierefreie PDFs oder ebenfalls als Webpublikationen mit Hilfe des Berichte-Frameworks der Stadt Wien erstellt werden.&nbsp;</p><p>Publikationen mittels CMS sind vergleichsweise aufwändig, weil die Inhalte erst durch die Spezialist:innen in das System eingepflegt werden müssen. Dazu kommen Wartungs- und Update-Aufwände für das System selbst. Der Einsatz eines CMS zahlt sich also nur aus, wenn sich Inhalte regelmäßig ändern.&nbsp;</p><p>PDFs haben die Nachteile, dass sie nicht den selben Grad an Barrierefreiheit erreichen wie Webpublikation und aufgrund ihres fixierten Layouts nicht für verschiedene Endgeräte optimierbar sind. Sofern ein eigenes Layoutprogramm verwendet wird, müssen die Inhalte ebenfalls durch Spezialist:innen eingepflegt werden.&nbsp;</p><p>Hier setzt das Berichte-Framework an: Es ermöglicht die Erstellung von Webpublikationen direkt aus Office-Programmen wie Word*, wie sie in allen Dienststellen zur Verfügung stehen. D. h. die Inhalte können von den fachlich zuständigen Personen und Stellen bereits im richtigen Format geliefert werden.&nbsp;</p><p>Dafür stehen Word-Vorlagen zur Verfügung, die alle Formatvorlagen enthalten, die auch für Webpublikation im Corporate Design der Stadt Wien geeignet sind. Dokumente, die nach diesen Vorlagen erstellt werden, können direkt von der Software des Berichte-Frameworks eingelesen werden und als fertige Webseite ausgegeben werden. Der Prozess ist soweit automatisiert, dass als Output ein ZIP-Paket geliefert wird, das bereits die fertige Webseite enthält. Zum Ansehen und Testen kann ein lokaler Webserver oder ein vom PID oder einem anderem Anbieter zur Verfügung gestellter Webspace verwendet werden.&nbsp;</p><p>&nbsp;</p><p>* Libre Office und Only Office (das Office-Programm in der Stadt-eigenen Enterprise-Cloud) werden ebenfalls über das Word-Docx-Format unterstützt.&nbsp;</p>

<p><span style="background-color:rgb(255,255,255);color:rgb(44,54,58);">Das Berichte-Framework ist seit 2022 im Einsatz. Unter anderen folgende Publikationen der Stadt Wien wurden bereits damit umgesetzt:&nbsp;</span></p><ul><li><a href="https://www.wien.gv.at/spezial/cd-manual" target="_blank" rel="noopener noreferrer">Corporate Design-Manual</a></li><li><a href="https://www.wien.gv.at/spezial/ehealth-strategie" target="_blank" rel="noopener noreferrer">eHealth Strategie</a></li><li><a href="https://www.wien.gv.at/spezial/naturschutzbericht" target="_blank" rel="noopener noreferrer">Naturschutzbericht</a></li><li><a href="https://www.wien.gv.at/spezial/personalbericht" target="_blank" rel="noopener noreferrer">Personalbericht</a></li><li><a href="https://www.wien.gv.at/spezial/smartklimacitystrategie" target="_blank" rel="noopener noreferrer">Smart Klima City Strategie</a></li><li><a href="https://www.wien.gv.at/spezial/umweltbericht" target="_blank" rel="noopener noreferrer">Umweltbericht</a></li></ul>

thumbnail_ParserStory2.png

ParserStory2.png

Online-Publishen von Office-Dokumenten

<h2>Bei der Erstellung einer WordPress Website verwenden wir zumeist folgende Komponenten:</h2><ul><li>WordPress Software</li><li>Designmotiv (Theme)</li><li>Zusatzmodule (Plugins)</li></ul><p><strong>WordPress</strong> ist eine sogenannte Open Source Software – sie ist frei zugänglich und kostenlos. Sie wird von einer großen Gemeinschaft von ProgrammiererInnen ständig weiter entwickelt. Bei der Erstellung einer Website mit WordPress verursachen die Installation und die Inbetriebnahme der Software Kosten, sowie deren spezifische Konfiguration und regelmäßige Aktualisierung.</p><p>Ein, zumeist kostenpflichtiges,&nbsp;<strong>Designmotiv</strong> (Theme) dient als Grundlage und Baukastensystem, mit dem wir eine auf den Kunden zugeschnittene Website mit individuellem Design und Funktionalitäten erarbeiten. Designmotive werden ständig von ihren Entwicklern verbessert und an neue technische Gegebenheiten angepasst, deshalb sollte auch das Designnotiv auf aktuellem Stand gehalten werden.</p><p><strong>Zusatzmodule</strong> (Plugins) werden installiert, um spezifische Funktionalitäten einer Website, wie beispielsweise Hilfsmittel zur Suchmaschinenoptimierung, Kontaktformulare, Mehrsprachigkeit, Dialogfenster (Popups), etc. umzusetzen.</p>

<h2>Aktualisierungen</h2><p>Software wird ständig weiter entwickelt. Aus folgenden Gründen ist es sinnvoll, eine Website entsprechend aktuell zu halten:</p><p><strong>Kompatibilität:</strong> Eine regelmäßige Aktualisierung aller Komponenten, also WordPress Software, Designmotiv und Plugins, ist keine Fehlerbehebung, es ist eine Vorsorge, die dabei helfen soll, dass alle Bestandteile kontinuierlich zusammenspielen und funktionieren. Manchmal bietet ein Update neue Funktionen, oftmals wird auch nur die Kompatibilität von Designmotiv und Zusatzmodulen zur aktuellen WordPress-Installation sichergestellt. Auch hier ist eine Aktualisierung sinnvoll.</p><p><strong>Sicherheit:</strong> Auch aus Sicherheitsgründen sollte WordPress und alle installierten Komponenten aktuell gehalten werden. Immer wieder werden von Programmierern, die sich mit Sicherheitsschwachstellen auskennen und sie ausnutzen (sogenannten Hackern) solche Sicherheitslücken ausspioniert und für Angriffe genutzt. Durch das regelmäßige Einspielen von Sicherheitsupdates, kann verhindert werden, dass eine Website gefährdet ist und von Hackern für das Einschleußen von schadhaftem Code oder Viren verwendet wird oder als Schlupfloch, um Spam (Nachrichten, die dem Empfänger unverlangt zugeschickt werden) über den Webserver zu verschicken.</p><p><strong>Fehlerbehebung:</strong> (Bug-Fixes) Im Laufe der Zeit werden immer wieder kleine oder größere Fehlerkorrekturen von den Entwicklern im Code behoben.</p><p>Mehr Infos unter: <a href="https://wordpress.org/support/"><u>https://wordpress.org/support/</u></a></p>

thumbnail_00WordPress2.png

00WordPress2.png

WordPress aktuell halten

<h2>Applikation zur Datenvisualisierung in der Stadt Wien</h2><p><strong>Kunde: </strong>Magistratsabteilungen der Stadt Wien</p><p>Unter der Ägide der Magistratsabteilung 23 - Wirtschaft, Arbeit und Statistik</p><p>Betreut durch die Magistratsabteilung 01 - Wien Digital</p><p>Entwicklung einer browserbasierten Applikation zur Visualisierung von Daten. Mit ViennaViz können Zahlen und Daten in gängigen Diagrammarten dargestellt und mittels eines Einbettungscodes einfach und direkt auf Webseiten publiziert werden.</p><h2>Eingabe der Daten</h2><p>In die Applikation können Daten aus verschiedenen Quellen eingegeben werden:</p><ul><li>aus einer Schnittstelle wie einer URL des Open Government Data Portals,</li><li>aus CSV-Dateien,</li><li>aus HTML Tabellen</li><li>über eine direkte Dateneingabe in die Applikation</li></ul><p>Auch viele andere Datenquellen sind möglich.</p>

<h2>Visualisierungsidiome</h2><p>Die Applikation bietet 14 verschiedene Diagrammarten an:</p><ol><li>Balkendiagramm</li><li>Säulendiagramm</li><li>Gestapeltes Säulendiagramm</li><li>Gruppiertes Balkendiagramm</li><li>Liniendiagramm</li><li>Liniendiagramm gruppiert</li><li>Bevölkerungspyramide</li><li>Bezirkskarte</li><li>Zählbezirkskarte</li><li>Kreisdiagramm</li><li>Tortendiagramm</li><li>Streudiagramm</li><li>Fächendiagramm</li><li>Tabelle</li></ol><p>Fünf davon mit logarithmischer Skala:</p><ol><li>Säulendiagramm</li><li>Gestapeltes Säulendiagramm</li><li>Liniendiagramm</li><li>Liniendiagramm gruppiert</li><li>Bevölkerungspyramide</li></ol><p>Bei drei Diagrammarten kann durch Hinzuschalten eines zusätzlichen Idioms ein Kombidiagramm erstellt werden:</p><ul><li>Gestapeltes Säulendiagramm mit Linie</li><li>Gruppiertes Balkendiagramm mit Linie</li><li>Gruppiertes Liniendiagramm mit Säule</li></ul>

<h2>Gestaltungsmöglichkeiten</h2><p>Zur Gestaltung von Diagrammen gibt es eine umfassende Palette an Einstellungsmöglichkeiten.</p><h3>Zusätzliche Darstellung von Werten und Bereichen:</h3><ul><li>spezifizierbare Wertebereiche, die als Fläche hervorgehoben werden</li><li>Eingabe einer Referenzlinie</li><li>Individuelle Anpassung der y-Achse</li><li>Verschiedene Sortierungsmöglichkeiten</li></ul><h3>Farben:</h3><ul><li>Graduierte und kategorische Farbpaletten</li></ul><h3>Beschriftungen:</h3><ul><li>Beschriftungen wie Titel, Untertitel und Skalenüberschriften</li><li>Tooltips</li><li>Legenden</li><li>Randannotationen</li><li>Randlegenden</li><li>Achsenbeschriftungen</li><li>Auswahl der Art der Zahlendarstellung</li><li>Auswahl der Art der Angabe von Werten</li></ul><h2>Interaktive Elemente</h2><p>Die Hoverlogik von ViennaViz ist sehr vielseitig und leistungsstark und kann gut an individuelle Anforderungen angepasst werden.</p><h2>Einbetten auf Webseiten</h2><p>Fertige Diagramme können mittels eines iframe auf einer Website eingebettet werden. Wird das Diagramm in der Applikation verändert, teilt sich diese Veränderung überall dort hin mit, wo es eingebettet ist. Grafiken bleiben so auf verschiedenen Webseiten aktuell, ohne dass Administrationsaufwand damit verbunden ist.</p><h2>Backendprogrammierung</h2><p>Die Applikation hat zwei Teile: eine frontendseitige, browserbasierte Applikation und eine backendseitige Node Applikation. Node arbeitet serverseitig mit JavaScript und bietet entsprechende Libraries mit Schnittstellen zu Betriebssystem und Datenbanken an.</p><p><i>Wir bedanken uns bei der Stadt Wien für die Zusammenarbeit!</i></p>

<div class="raw-html-embed"><div class="viennaviz-container" style="overflow: hidden; padding-top: 78%; position: relative;">
<iframe src="https://stp.wien.gv.at/viennaviz/anonymous/embed.html?id=cc2addab-7be2-4bf3-a676-6505603d1453" title="ViennaViz Visualisierung" style="border: 0; height: 100%; left:0; position: absolute; top: 0; width: 100%;">
<p>Keine Unterstützung für iframes in Ihrem Browser</p></iframe></div></div><div class="caption" style="text-align:center;">Quelle: <a href="https://wien1x1.at/bevoelkerungsentwicklung-2019/">https://wien1x1.at/bevoelkerungsentwicklung-2019</a></div>

large_ViennaViz_Lekton.png

medium_ViennaViz_Lekton.png

small_ViennaViz_Lekton.png

thumbnail_ViennaViz_Lekton.png

ViennaViz_Lekton.png

ViennaViz

Grafik & Softwareentwicklung

lektonlogo.svg

Stadt Wien – MA23 Wirtschaft, Arbeit und Statistik

Stadt Wien – MA01 Wien Digital

<p>Die Stadt Wien macht Daten aus der Open Government Data-Plattform der Stadt Wien zugänglich. Diese Daten sind für die Bevölkerung von großem Interesse. Lekton hat mit ViennaViz eine browserbasierte Applikation entwickelt mit der Diagramme erstellt, gestaltet, gespeichert und eingebettet werden können. Die Benutzer:innen der Applikation sind flexibel in der Auswahl der Daten und der Form der Darstellung (Karte, Säulen, Balken …).</p>

thumbnail_datenvisualisierung2.png

datenvisualisierung2.png

medium_ViennaViz-Screen_uebersicht.png

small_ViennaViz-Screen_uebersicht.png

thumbnail_ViennaViz-Screen_uebersicht.png

ViennaViz-Screen_uebersicht.png

large_Lekton_ViennaViz.png

medium_Lekton_ViennaViz.png

small_Lekton_ViennaViz.png

thumbnail_Lekton_ViennaViz.png

Lekton_ViennaViz.png

ViennaVIZ – Open Data Visualisierung für die Stadt Wien

Jörg Lenneis hat sich nach einem Studium der Informatik und seiner Tätigkeit als Assistent am Institut für Statistik der Wirtschaftsuniversität Wien auf die Bereiche Netzwerktechnik, Server-Administration, Betriebssysteme, Datenbanksysteme und Entwicklung, mit einem Schwerpunkt auf Backend-Lösungen, spezialisiert. Er ist als Mitbegründer von Anbeginn Wegbegleiter der Lekton eG. Seine umfassende Erfahrung paart sich mit seinem Geschick, komplexe Probleme rasch zu einer Lösung zu führen. Das breite Spektrum seiner Kompetenzen lässt ihn mit Leichtigkeit die Perspektiven zwischen Detailfragen und Theorie, zwischen Systemadministration und Softwarearchitektur wechseln.

medium_Joerg_Lenneis.png

small_Joerg_Lenneis.png

thumbnail_Joerg_Lenneis.png

Joerg_Lenneis.png

Max Limbeck hat Medieninformatik an der Technischen Universität Wien und Kunstgeschichte an der Universität Wien studiert. Als Softwarearchitekt und Entwickler spezialisiert er sich auf Frontend-Systeme, Schnittstellen zum Backend-Bereich und insbesondere auf Datenvisualisierung. Max Limbeck steht oft an der Schnittstelle von Darstellung und den stark technischen Aspekten der EDV. Die für beide Blickwinkel notwendige Koordinationsarbeit erklärt auch sein Interesse für Computerunterstützte Gruppenarbeit (CSCW: Computer Supported Cooperative Work). Er ist Mitbegründer der Lekton Genossenschaft für Grafik und Software Entwicklung. Er schätzt es, wenn verschiedene Welten und Interessen aufeinander stoßen und sich zu Projekten von hoher Komplexität vereinen.

medium_max_cmarkuszahradnik-com.jpg

small_max_cmarkuszahradnik-com.jpg

thumbnail_max_cmarkuszahradnik-com.jpg

max_cmarkuszahradnik-com.jpg

Manuela Schmidt hat zunächst eine Ausbildung als Mediengestalterin für Digital- und Printmedien absolviert und im Anschluss Kartographie & Geomedientechnik an der Hochschule München studiert. Ihre Diplomarbeit brachte sie nach Wien, wo sie anschließend einige Jahre an der Technischen Universität Wien forschte und lehrte. Seit 2016 als freie Grafikerin und Kartographin tätig; seit 2019 Mitglied der Lekton eG. Sie schätzt die Arbeit an der Schnittstelle von Daten und Visualisierung. Dabei verwendet sie gern auch Open Source Software und offene Daten, wie beispielsweise QGIS und OpenStreetMap. Manuela Schmidt gibt ihr Wissen als externe Lehrbeauftragte an der Technischen Universität Wien weiter.

medium_manu_cmarkuszahradnik-com.jpg

small_manu_cmarkuszahradnik-com.jpg

thumbnail_manu_cmarkuszahradnik-com.jpg

manu_cmarkuszahradnik-com.jpg

Gabi Damm ist Mitbegründerin und geschäftsführende Vorständin der Lekton Genossenschaft und als Projektleiterin u. a. für Softwareprojekte im Bereich Datenvisualisierung verantwortlich. Neben ihrer langjährigen Arbeit als Grafikerin und Illustratorin verfügt sie über eine umfassende Erfahrung in der Abwicklung von IT-Projekten. Seit ihrer Ausbildung zur Grafik Designerin am Kolleg der Höheren Graphischen Bundes- Lehr- und Versuchsanstalt sowie ihrem Studium für Organisationsentwicklung und Wissensmanagement an der Fachhochschule Wien gilt ihr besonderes Interesse jenen Schnittstellen, an denen sich Design und Wissen begegnen. Ihre Expertise um das Sichtbarmachen von Information sowie die Vermittlung komplexer Wissens- und Lernprozesse gibt sie als Lektorin für Mediendesign und Medienwerkstatt an der Fachhochschule Burgenland in praxisbezogenen Lehrveranstaltungen weiter.

medium_Gabi_Damm2.png

small_Gabi_Damm2.png

thumbnail_Gabi_Damm2.png

Gabi_Damm2.png

PostgreSQL

Vue.js

Docker

GraphQL

JavaScript

Node

Wien visualisieren

Stadt Wien – MA 18 Stadtentwicklung und Stadtplanung

<p style="margin-left:0px;">Internetauftritt der Publikation "100 Jahre Stadtplanung" basierend auf einer umfangreichen Printpublikation im Corporate Design der Stadt Wien.</p><p style="margin-left:0px;">Ziel war es, die Inhalte und Erkenntnisse der Publikation in einer digitalen Umgebung im Erscheinungsbild des Corporate Designs der Stadt Wien umzusetzen.</p><p style="margin-left:0px;">Das Design der Website vermittelt ein modernes und ansprechenden look. Hauptaugenmerk liegt dabei dabei auf einer konsistenten Verwendung von Farben, Schriften und grafischen Elementen.</p><p style="margin-left:0px;">Die Publikation enthält außerdem multimediale Elemente wie Bilder, Videos und interaktive Grafiken, die das Nutzererlebnis bereichern und eine interaktive Auseinandersetzung mit den Informationen ermöglichen.</p>

small_stadtplanung_coverimage.png

thumbnail_stadtplanung_coverimage.png

stadtplanung_coverimage.png

Screenshot Website 100 Jahre Stadtplanung Wien

large_100JahreSTadtplanung.png

medium_100JahreSTadtplanung.png

small_100JahreSTadtplanung.png

thumbnail_100JahreSTadtplanung.png

100JahreSTadtplanung.png

Internetauftritt 100 Jahre Stadtplanung Wien

Webframework der Stadt Wien

Stadtentwicklung

NWV - Neuer Wissenschaftlicher Verlag

<p style="margin-left:0px;">Neben einer Vielzahl von köstlichen Rezepten bietet dieses Buch wertvolle Tipps und Ratschläge für die Küche an Bord, den Einkauf vor Ort, die Einrichtung eines 'Basislagers' auf dem Schiff sowie die perfekte Ausstattung und Resteverwertung unterwegs.</p><p style="margin-left:0px;">Unser gestalterisches Konzept zielt darauf ab, sowohl die maritime Atmosphäre als auch die praktischen Aspekte des Kochens auf See einzufangen. Durch eine harmonische Kombination von maritimen Elementen, lebendigen Farben und ansprechenden Fotografien schaffen wir eine ästhetisch ansprechende und zugleich informative Gestaltung.</p><p style="margin-left:0px;">Das Kochbuch 'Hubers Kombüse' ist somit nicht nur ein kulinarischer Leitfaden, sondern auch ein inspirierender Begleiter für alle, die das Abenteuer der Seefahrt mit gastronomischem Genuss verbinden möchten.</p>

Projekte

.css-16b1m1q{display:inline;line-height:1.3;-webkit-padding-start:var(--chakra-space-1);padding-inline-start:var(--chakra-space-1);-webkit-padding-end:var(--chakra-space-1);padding-inline-end:var(--chakra-space-1);background:var(--chakra-colors-white);}Wien visualisieren

Stadtentwicklung

Kochen auf dem Wasser

Online-Publikationen automatisieren

Ursachen von Sucht

Business Model Explorer

Natürliche Intelligenz

Digitale Werkzeuge nutzen

Social Media Profis

Gemeinwohlorientiert und unabhängig

Mit Begleitung

Gesellschaft analysieren

Mit Wirkung

Turbo-Wärme

Wir lieben Modelle

Die Stadt weiter denken

Eine neue Seite von Führung

Hinausposaunen

Charme und guter Geschmack

Über Gesundheit kommunizieren

Maker:innen im Museum

Naturschutz für Wien

Wissen zum Thema Sucht

Maschinen monitoren

Einfach kochen

Architektur als Metapher

Risiken bewerten

Angestellte der Stadt Wien

Ein roter Faden

Verantwortungsvoll

Tätigkeiten

Storys