Improve homepage.

This commit is contained in:
Daniel Kraus 2015-09-06 18:14:06 +02:00
parent 95dfa95562
commit a290de26e7
3 changed files with 297 additions and 159 deletions

BIN
www/img/firstrun.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

View File

@ -10,6 +10,10 @@
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jumbotron-narrow.css" rel="stylesheet"> <link href="css/jumbotron-narrow.css" rel="stylesheet">
<style>
h5 { font-weight:bold; }
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
@ -22,12 +26,24 @@
das die Zentrale Arztbriefablage um Funktionen für das Formatieren von das die Zentrale Arztbriefablage um Funktionen für das Formatieren von
Laborwerten erweitert."> Laborwerten erweitert.">
<link rel="icon" type="image/png" href="img/icon.png"> <link rel="icon" type="image/png" href="img/icon.png">
<style>
floatbox {
padding: 0;
margin: 0 0.5em;
}
</style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="header clearfix"> <div class="header clearfix">
<nav> <nav>
<ul class="nav nav-pills pull-right"> <ul class="nav nav-pills pull-right">
<li>
<a href="#anleitung">Anleitung</a>
</li>
<li>
<a href="#anpassen">Anpassen</a>
</li>
<li> <li>
<a href="downloads/">Download</a> <a href="downloads/">Download</a>
</li> </li>
@ -58,61 +74,134 @@
</p> </p>
</div> </div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Vorher</h2>
</div>
<div class="panel-body">
<img class="img-responsive center-block" src="img/vorher.png" alt="Vorher">
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Nachher</h2>
</div>
<div class="panel-body">
<img class="img-responsive center-block" src="img/nachher.png" alt="Nachher">
</div>
<div class="panel-footer">
<p>Am Beispiel des Ambulanz-Stils</p>
</div>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="clearfix"> <div class="clearfix">
<h2 class="page-header"> <h2 class="page-header" id="anleitung">
<img class="pull-right img-responsive" src="img/ribbon.png" alt="zaaReloaded2-Ribbon" />
Anleitung Anleitung
</h2> </h2>
<ol> <p>
<li> <img class="center-block img-responsive" src="img/firstrun.png" alt="Begrüßungsfrage">
</p>
<p>
Beim allerersten Mal, wenn das Add-in zusammen mit Word
gestartet wird, wird man gefragt, in welchem Modus das
Add-in operieren soll. Im <em>Ärztemodus</em> wird man ggf.
aufgefordert, Zusatzinformationen zu Laborparametern (z.B.
Ziel-Spiegel von Medikamenten) anzugeben; im
<em>Sekretariatsmodus</em> unterbleiben solche Nachfragen.
</p>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
1. Labor einfügen
</h3>
</div>
<div class="panel-body">
<p>
<img class="center-block img-responsive" src="img/vorher.png" alt="Vorher">
</p>
</div>
<div class="panel-footer">
<p>
Laborwerte auf üblichem Wege in einen Arztbrief einfügen Laborwerte auf üblichem Wege in einen Arztbrief einfügen
(alternativ kann der Befehl "Demo" ausgeführt werden, dann wird (alternativ kann der Befehl "Demo" ausgeführt werden,
ein Beispieldokument mit Laborwerten geöffnet). dann wird ein Beispieldokument mit Laborwerten
</li> geöffnet).
<li> </p>
<img class="pull-right img-responsive" src="img/stilauswahl.png" alt="Stil auswählen" /> </div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
2. zaaReloaded-Funktion aufrufen
</h3>
</div>
<div class="panel-body">
<p>
<img class="center-block img-responsive" src="img/ribbon.png" alt="zaaReloaded2-Ribbon">
</p>
</div>
<div class="panel-footer">
<p>
Im zaaReloaded-Tab (s.o.) den linken Knopf "Formatieren" Im zaaReloaded-Tab (s.o.) den linken Knopf "Formatieren"
klicken. klicken.
</li> </p>
<li> </div>
Beim ersten Mal erscheint eine Liste mit Stilen, aus der man den </div>
gewünschten Stil auswählt (siehe Abbildung). Beim nächsten Mal,
wenn man auf diesen Knopf drückt, wird der zuletzt verwendete Stil <div class="panel panel-primary">
genommen. <div class="panel-heading">
</li> <h3 class="panel-title">
<li> 3. Ggf. Stil auswählen
</h3>
</div>
<div class="panel-body">
<p>
<img class="center-block img-responsive" src="img/stilauswahl.png" alt="Stil auswählen">
</p>
</div>
<div class="panel-footer">
<p>
Beim ersten Mal erscheint eine Liste mit Stilen, aus der
man den gewünschten Stil auswählt (siehe Abbildung).
Beim nächsten Mal, wenn man auf diesen Knopf drückt,
wird der zuletzt verwendete Stil genommen.
</p>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
4. Ggf. Kommentar ergänzen
</h3>
</div>
<div class="panel-body">
<p>
<img class="center-block img-responsive" src="img/itemcommentview.png" alt="Kommentar eingeben">
</p>
</div>
<div class="panel-footer">
<p>
Sofern der <em>Ärztemodus</em> eingestellt ist, können
für bestimmte Laborparameter Zusatzkommentare eingegeben
werden, z.B. um den Zielspiegelbereich eines
Medikamentes anzugeben.
</p>
<p>
Wenn man diesen Dialog mit "Abbrechen" oder
<kbd>ESC</kbd> beendet, erscheint ein gelb markierter
Hinweis im formatieren Laborblock.
</p>
<p>
Wenn man hingegen keinen Kommentartext eingibt, wird
kein Kommentar eingefügt, also auch das Präfix (hier
"(Ziel-Talspiegel:") und das Suffix (hier "µg/l)")
nicht.
</p>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
5. Fertig!
</h3>
</div>
<div class="panel-body">
<p>
<img class="center-block img-responsive" src="img/nachher.png" alt="Nachher">
</p>
</div>
<div class="panel-footer">
<p>
Einen Moment warten... Voilà. Einen Moment warten... Voilà.
</li> </p>
</ol> </div>
</div> </div>
<h2 class="page-header"> <h2 class="page-header">
@ -123,112 +212,161 @@
diese bei Bedarf im Hintergrund. diese bei Bedarf im Hintergrund.
</p> </p>
<h2 class="page-header"> <h2 class="page-header" id="anpassen">
Anpassen Anpassen
</h2> </h2>
<p> <p>
Das Addin enthält einen Stil-Editor, mit dem die eingebauten Stile zaaReloaded liest die Laborwerte aus einem Arztbrief ein,
bearbeitet und neue Stile entworfen werden können: analysiert sie, und gibt sie entsprechend einem vom Benutzer
programmierbaren Stil wieder aus.
</p> </p>
<p class="text-center"> <div class="panel panel-default col-lg-7 col-md-5 pull-right floatbox">
<img src="img/stilbearbeiten.png" alt="Stil bearbeiten" />
</p>
<p class="clearfix">
<img src="img/elementpicker.png" alt="Elemente" class="pull-right" />
Jeder Stil setzt sich aus sog. <i>Elementen</i> zusammen. Es gibt
<i>Steuerelemente</i>, die zum Beispiel für die Auswahl eines Tages
(erster Tag/letzter Tag) zuständig sind, und es gibt
<i>Ausgabeelemente</i>, die die eigentliche Formatierung und Ausgabe
der Laborwerte übernehmen.
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Steuerelemente
</h3>
</div>
<div class="panel-body"> <div class="panel-body">
<ul> <img class="img-responsive center-block" src="img/stilbearbeiten.png" alt="Stil bearbeiten">
<li>Ersten Tag auswählen</li> Screenshot des Stil-Editors
<li>Letzten Tag auswählen</li>
<li>Jeden Tag nacheinander auswählen</li>
<li>Zwei Spalten einfügen/zur nächsten Spalte wechseln</li>
</ul>
</div> </div>
</div> </div>
</div> <p>
<div class="col-sm-6"> Das Addin enthält einen Stil-Editor, mit dem die eingebauten Stile
<div class="panel panel-default"> bearbeitet und neue Stile entworfen werden können. Stile
<div class="panel-heading"> können importiert und exportiert werden.
<h3 class="panel-title"> </p>
<p>
Bei einem Stil kann definiert werden, ob pathologische
Laborwerte auf bestimmte Weise hervorgehoben werden sollen
(fett, kursiv, unterstrichen), und in welchen Situationen
der Referenzbereich ausgegeben werden soll: Niemals, immer
oder bei pathologischen Werten und/oder Parametern, die
intern als "speziell" markiert sind (<a href="#parameter">s.u.</a>).
</p>
<p>
Die Stile bestehen aus sogenannten Elementen, die der Reihe
nach abgearbeitet werden. Ein Element ist entweder ein
<em>Steuerelement</em> oder ein <em>Ausgabeelement</em>.
</p>
<h3>
Ausgabeelemente Ausgabeelemente
</h3> </h3>
</div> <p>
<em>Ausgabeelemente</em> sind für die Ausgabe von Laborwerten
oder anderem Text zuständig. Ein Beliebiger-Text-Element gibt
ganz einfach den Text aus, den es enthält. Auf diese Weise
kann man z.B. zusätzliche Zeilen in die Laborausgabe einfügen
für Werte, die nicht aus dem Lauris übernommen werden, etwa
ein Nephrologisches Sediment, das dann noch händisch
vervollständigt werden muß.
</p>
<div class="panel panel-default col-lg-7 col-md-5 pull-right floatbox">
<div class="panel-body"> <div class="panel-body">
<ul> <img class="img-responsive center-block"
<li>Laborparameter</li> src="img/elementbearbeiten.png" alt="Laborparameter-Element bearbeiten">
<li>Beliebiger Text</li> Laborparameter-Ausgabeelement
</ul>
</div>
</div>
</div> </div>
</div> </div>
<div class="row"> <h4>
<div class="col-md-12"> Laborparameter-Element
</h4>
<p> <p>
"Beliebiger Text" kann, wie der Name schon sagt, beliebigen Text Die eigentliche Power des Add-ins liegt in
enthalten, der nicht weiter bearbeitet wird. Auf diese Weise kann Laborparameter-Elementen. Jedes Element gibt einen Absatz mit
man z.B. Platzhalter für Urinsedimente ausgeben lassen, die dann Laborwerten aus, die frei definiert werden können (vgl.
noch händisch vervollständigt werden. Abbbildung).
</p> </p>
<p> <p>
"Laborparameter" enthalten eine durch Kommata getrennte Auflistung Man schreibt einfach die gewünschten Parameter durch Kommata
von Parametern, die ausgegeben werden sollen. Jedes Element getrennt in das Eingabefeld. Optional kann man durch einen
"Laborparameter" kann optional einen Titel enthalten: Doppelpunkt getrennt eine Beschriftung voranstellen. In der
Abbildung ist das "Klinische Chemie".
</p>
<h5 id="parameter">
Parameter-Bezeichnungen
</h5>
<p>
zaaReloaded2 verwendet teilweise eigene Bezeichnungen für
Parameter, bspw. "Na" für Natrium, während in der originalen
Lauris-Ausgabe "Natrium" steht. Momentan gibt es noch keine
Möglichkeit, die bekannten Parameter im Add-in selbst
einzusehen; die Liste steht aber im Quellcode: <a
href="http://git.bovender.de/?p=zaaReloaded2.git;a=blob;f=zaaReloaded2/Defaults/parameters.txt"
target="_blank">git.bovender.de/.../paramteters.txt</a>. In
der Datei ist für manche Parameter auch die gewünschte Zahl
an Dezimalstellen hinterlegt sowie die Angabe, ob in der
Referenzbereich auch bei normalem Wert mit ausgeben werden
soll (abhängig von der Stil-Einstellung).
</p>
<h5>
Kommentare
</h5>
<p>
<img class="img-responsive center-block" src="img/itemcomment.png" alt="Parameter-Kommentar">
</p> </p>
<p> <p>
Beispiel: Wenn hinter einem Parameter-Namen ein Text in
</p> Anführungszeichen eingegeben wird, wird dieser Text als
<blockquote> <em>Kommentar</em> ausgewertet (siehe Abbildung oben). Beim
<p> Formatieren wird dieser Kommentar mit einer
<img src="img/elementbearbeiten.png" alt="Element bearbeiten" /> Eingabe-Aufforderung angezeigt, wobei der Text zwischen den
spitzen Klammern (im Beispiel "&lt;*** BITTE ANGEBEN
***&gt;") als Vorgabe verwendet wird (die spitzen Klammern
verschwinden natürlich):
</p> </p>
<p> <p>
Klinische Chemie: Na, K, Cl, (usw.) <img class="img-responsive center-block" src="img/itemcommentview.png" alt="Eingabeaufforderung für Kommentar">
</p>
</blockquote>
<p>
In diesem Fall ist "Klinische Chemie:" der optionale Titel.
</p> </p>
<p> <p>
Die Bezeichnungen der einzelnen Parameter sind fest einprogrammiert. In den <em>Einstellungen</em> können die
Teils decken sie sich mit den Bezeichnungen, wie sie in der Eingabe-Aufforderungen für Kommentare im Sinne eines
Zentralen Arztbriefablage erscheinen; teils sind sie aber auch <em>Sekretariatsmodus</em> ausgeschaltet werden. Dann wird
Surrogate (z.B. "eGFR (CKD-EPI)" anstatt "glomerul. Filtrationsr. der Kommentar in der Ausgabe <mark>gelb
CKD-EP"). hervorgehoben</mark>.
</p> </p>
<h5>
Platzhalter
</h5>
<p> <p>
Die Platzhalter "SU-*", "U-*" und "*" geben die noch nicht Mittels <em>Platzhaltern</em> ("Jokern", "Wildcards") können
verwendeten Werte für Sammelurin, Spontanurin und alles weitere aus. alle Laborwerte ausgegeben werden, die bis dahin noch nicht
"*" sollte daher als letztes verwendet werden. explizit ausgewählt wurden. Wenn man "*" verwendet, werden
alle noch nicht selektierten Werte ausgegeben. Mit "U-*"
werden nur die noch nicht verwendeten Werte des Spot-Urins
ausgegeben und mit "SU-*" die noch nicht verwendeten Werte
des Sammelurins.
</p> </p>
<p>
Die Liste der möglichen Parameternamen ist momentan fest
einprogrammiert und kann auch noch nicht angezeigt werden. Man kann
beim Entwickeln eines Stils aber probehalber den Platzhalter "*"
verwenden und sieht dann, welche Parameternamen noch verwendet
werden könnten.
</p>
</div>
</div>
<h4>
Beliebiger Text
</h4>
<p>
Das Ausgabe-Element "Beliebiger Text" macht genau das:
Beliebigen Text ausgeben, der nicht weiter bearbeitet wird.
Auf diese Weise kann man z.B. Platzhalter für Urinsedimente
ausgeben lassen, die dann noch händisch vervollständigt
werden müssen.
</p>
<h3>
Steuerelemente
</h3>
<p>
Mit <em>Steuerelementen</em> kann z.B. die Auswahl eines Datums
für die Laborausgabe (erster/letzter Tag usw.) kontrolliert oder
auch der Dokumentfluß gesteuert werden, wobei bislang nur die
Ausgabe in zwei Spalten implementiert ist.
</p>
<p>
Steuerelemente zur Auswahl von bestimmten Daten
(erster/letzter Tag usw.) enthalten <em>Kindelemente</em>. Nur
Ausgabeelemente können Kindelemente sein. Ein Steuerelement
wählt die Laborwerte für das entsprechende Datum aus und
übergibt sie den Kindelementen, die die Laborwerte ausgeben.
Mit dem Steuerelement <em>Jeder Tag</em> werden alle
Laborwerte nach Kalendertagen sortiert, und die Kindelemente
geben die Werte für jeden Kalendertag aus.
</p>
</div>
</div>
</div>
<footer class="footer"> <footer class="footer">
<p> <p>