Rewrite homepage using Bootstrap.

This commit is contained in:
Daniel Kraus 2015-08-25 14:41:17 +02:00
parent be9c7305ec
commit d6bbeaf954
2 changed files with 321 additions and 177 deletions

View File

@ -0,0 +1,79 @@
/* Space out content a bit */
body {
padding-top: 20px;
padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-right: 15px;
padding-left: 15px;
}
/* Custom page header */
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}

View File

@ -1,186 +1,251 @@
<html>
<!DOCTYPE html>
<html lang="de">
<head>
<title>zaaReloaded2 by Daniel Kraus</title>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jumbotron-narrow.css" rel="stylesheet">
<!-- 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:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<title>zaaReloaded2</title>
<meta name="author" content="Daniel Kraus">
<style type="text/css"><!--
* {
font-family: Arial; font-size: 16px; line-height: 125%;
color: #333;
}
body { margin: 16px 24px; max-width: 800px; }
h1, h2 { color: #5e2750; }
h1 { font-size: 300%; margin: 48px 0 24px 0; }
h2 { font-size: 200%; margin: 32px 0 16px 0; }
p { text-align: justify; }
img {
box-shadow: 2px 2px 8px #444;
}
.download {
width: 500px; margin: 16px auto;
padding: 8px; border: 1px solid #888;
box-shadow: 2px 2px 8px #444;
background-color: #eef;
}
.float-right {
float: right;
margin: 8px 0 8px 16px;
}
.center {
text-align: center;
}
.clear {
clear: both;
}
--></style>
<meta name="descrption" content="Add-in für Microsoft Word 2010-2013,
das die Zentrale Arztbriefablage um Funktionen für das Formatieren von
Laborwerten erweitert.">
</head>
<body>
<h1>zaaReloaded2</h1>
<p style="font-weight: bold;">
Erweiterung für Microsoft&reg; Word 2010-2013, das die <a
href="http://www.smi.ukw.de/sap-klinische-verfahren/archivsysteme/zentrale-arztbriefablage.html">
Zentrale Arztbriefablage (ZAA)</a> um Funktionen für das Formatieren
von Laborwerten erweitert.
</p>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li>
<a href="downloads/">Download</a>
</li>
<li>
<a href="doc/">Code Docs</a>
</li>
<li>
<a href="doc/md_HISTORY.html">Versionsgeschichte</a>
</li>
</ul>
</nav>
</div>
<div class="jumbotron">
<h1>zaaReloaded2</h1>
<p class="lead">
Erweiterung für Microsoft&reg; Word 2010-2013, das die
<a href="http://www.smi.ukw.de/sap-klinische-verfahren/archivsysteme/zentrale-arztbriefablage.html">Zentrale Arztbriefablage (ZAA)</a>
um Funktionen für das Formatieren von Laborwerten erweitert.
</p>
<p class="text-center">
<a class="btn btn-lg btn-primary" href="downloads/">
Download
</a>
</p>
</div>
<div class="download">
<h2 style="margin-top:0">Download</h2>
<p><a href="downloads/">zaa.nephrowiki.de/downloads</a></p>
<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="col-md-12">
<div class="clearfix">
<h2 class="page-header">
<img class="pull-right img-responsive" src="img/ribbon.png" alt="zaaReloaded2-Ribbon" />
Anleitung
</h2>
<ol>
<li>
Laborwerte auf üblichem Wege in einen Arztbrief einfügen
(alternativ kann der Befehl "Demo" ausgeführt werden, dann wird
ein Beispieldokument mit Laborwerten geöffnet).
</li>
<li>
<img class="pull-right img-responsive" src="img/stilauswahl.png" alt="Stil auswählen" />
Im zaaReloaded-Tab (s.o.) den linken Knopf "Formatieren"
klicken.
</li>
<li>
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.
</li>
<li>
Einen Moment warten... Voilà.
</li>
</ol>
</div>
<h2 class="page-header">
Updates
</h2>
<p>
Das Addin sucht täglich nach Updates und lädt und installiert
diese bei Bedarf im Hintergrund.
</p>
<h2 class="page-header">
Anpassen
</h2>
<p>
Das Addin enthält einen Stil-Editor, mit dem die eingebauten Stile
bearbeitet und neue Stile entworfen werden können:
</p>
<p class="text-center">
<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">
<ul>
<li>Ersten Tag auswählen</li>
<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 class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Ausgabeelemente
</h3>
</div>
<div class="panel-body">
<ul>
<li>Laborparameter</li>
<li>Beliebiger Text</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
"Beliebiger Text" kann, wie der Name schon sagt, beliebigen Text
enthalten, 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.
</p>
<p>
"Laborparameter" enthalten eine durch Kommata getrennte Auflistung
von Parametern, die ausgegeben werden sollen. Jedes Element
"Laborparameter" kann optional einen Titel enthalten:
</p>
<p>
Beispiel:
</p>
<blockquote>
<p>
<img src="img/elementbearbeiten.png" alt="Element bearbeiten" />
</p>
<p>
Klinische Chemie: Na, K, Cl, (usw.)
</p>
</blockquote>
<p>
In diesem Fall ist "Klinische Chemie:" der optionale Titel.
</p>
<p>
Die Bezeichnungen der einzelnen Parameter sind fest einprogrammiert.
Teils decken sie sich mit den Bezeichnungen, wie sie in der
Zentralen Arztbriefablage erscheinen; teils sind sie aber auch
Surrogate (z.B. "eGFR (CKD-EPI)" anstatt "glomerul. Filtrationsr.
CKD-EP").
</p>
<p>
Die Platzhalter "SU-*", "U-*" und "*" geben die noch nicht
verwendeten Werte für Sammelurin, Spontanurin und alles weitere aus.
"*" sollte daher als letztes verwendet werden.
</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>
<footer class="footer">
<p>
&copy; 2015 <a href="http://www.bovender.de">Daniel Kraus</a>
<span class="pull-right">
Handarbeit mit
<a href="http://www.vim.org">
Vim
</a>
und
<a href="http://getbootstrap.com">
Bootstrap
</a>
</span>
</p>
</footer>
</div>
<h2>Vorher</h2>
<p class="center"><img src="img/vorher.png" alt="Vorher" /></p>
<h2>Nachher</h2>
<p>Am Beispiel des Ambulanz-Stils:</p>
<p class="center"><img src="img/nachher.png" alt="Nachher" /></p>
<h2>Anleitung</h2>
<p class="center">
<img src="img/ribbon.png" alt="zaaReloaded2-Ribbon" />
</p>
<ol>
<li>Laborwerte auf üblichem Wege in einen Arztbrief einfügen
(alternativ kann der Befehl "Demo" ausgeführt werden, dann wird
ein Beispieldokument mit Laborwerten geöffnet).</li>
<li>Im zaaReloaded-Tab (s.o.) den linken Knopf "Formatieren"
klicken.</li>
<p class="center">
<img src="img/stilauswahl.png" alt="Stil auswählen" />
</p>
<li>
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.</li>
<li>Einen Moment warten... Voilà.</li>
</ol>
<h2 class="clear">Anpassen</h2>
<p>
Das Addin enthält einen Stil-Editor, mit dem die eingebauten Stile
bearbeitet und neue Stile entworfen werden können:
</p>
<p class="center">
<img src="img/stilbearbeiten.png" alt="Stil bearbeiten" />
</p>
<p class="clear">
<img src="img/elementpicker.png" alt="Elemente" class="float-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>
<p>
Steuerelemente:
</p>
<ul>
<li>Ersten Tag auswählen</li>
<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>
<p>
Ausgabeelemente:
</p>
<ul>
<li>Laborparameter</li>
<li>Beliebiger Text</li>
</ul>
<p>
"Beliebiger Text" kann, wie der Name schon sagt, beliebigen Text
enthalten, 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.
</p>
<p>
"Laborparameter" enthalten eine durch Kommata getrennte Auflistung
von Parametern, die ausgegeben werden sollen. Jedes Element
"Laborparameter" kann optional einen Titel enthalten:
</p>
<p>
Beispiel:
</p>
<blockquote>
<p>
<img src="img/elementbearbeiten.png" alt="Element bearbeiten" />
</p>
<p>
Klinische Chemie: Na, K, Cl, (usw.)
</p>
</blockquote>
<p>
In diesem Fall ist "Klinische Chemie:" der optionale Titel.
</p>
<p>
Die Bezeichnungen der einzelnen Parameter sind fest einprogrammiert.
Teils decken sie sich mit den Bezeichnungen, wie sie in der
Zentralen Arztbriefablage erscheinen; teils sind sie aber auch
Surrogate (z.B. "eGFR (CKD-EPI)" anstatt "glomerul. Filtrationsr.
CKD-EP").
</p>
<p>
Die Platzhalter "SU-*", "U-*" und "*" geben die noch nicht
verwendeten Werte für Sammelurin, Spontanurin und alles weitere aus.
"*" sollte daher als letztes verwendet werden.
<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>
<h2>Updates</h2>
<p>
Das Addin sucht täglich nach Updates und lädt und installiert diese
bei Bedarf im Hintergrund.
</p>
<h2>Weitere Informationen</h2>
<p><a href="doc/md_HISTORY.html">Versionsgeschichte</a></p>
<p><a href="doc/index.html">Quellcode-Dokumentation</a></p>
<hr />
<p>&copy; 2015 <a href="http://www.bovender.de">Daniel Kraus</a></p>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
<!-- vim: set tw=72 ai sts=2 ts=2 sw=2 : -->
<!-- vim: set tw=72 et ai sts=2 ts=2 sw=2 : -->
</html>