changeset 106:68f49d59b165

Moved D4E Ocean to new layout.
author Tom Gottfried <tom@intevation.de>
date Mon, 31 Mar 2014 18:12:45 +0200
parents abcfb1f3d11f
children 21d9e1a89721
files gnv/gnv.html gnv/gnv_files/screenshot1_small.png gnv/gnv_files/screenshot2_small.png gnv/gnv_files/style.css gnv/img/screenshot1.png gnv/img/screenshot2.png img/gnv_karte.png img/gnv_profil.png ocean.html ocean_body.html ocean_carousel.html
diffstat 11 files changed, 111 insertions(+), 291 deletions(-) [+]
line wrap: on
line diff
--- a/gnv/gnv.html	Mon Mar 31 18:06:11 2014 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,189 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml"><head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <meta name="keywords" content="Dive4Elements,Karten, Diagramme, Modelle, Fachdaten, Analyse, WMS, Visualisierung">
-  <link rel="stylesheet" type="text/css" href="gnv_files/style.css">
-  <title>Dive4Elements</title>
- </head>
-
-<body>
-<div class="wrapper">
-
-<div id="intro">
-<h2>Dive4Elements</h2>
-<p>Webanwendung für Karten, Diagramme und Modelle</p>
-</div>
-
-<div id="main">
-<a name="was-ist-dive4elements"></a>
-<h2>Was ist Dive4Elements?</h2>
-<p> Dive4Elements ist eine datenbankbasierte Webapplikation zur
-raum-zeitlichen Analyse von Fachdaten der 4 Elemente (Feuer, Wasser,
-Luft und Erde).
-<i>Dive</i> steht für <i>Digging, Investigating, Viewing, Exporting</i>.
-</p>
-
-<p>Dive4Elements gewährt webbasiert den Zugriff auf Datenmodelle in
-einem zentralen <b>Datawarehouse</b> und bietet die Möglichkeit zur
-Analyse, Visualisierung der Daten sowie Exportmöglichkeiten in offene
-Formate.</p>
-
-<p>
-Dive4Elements kombiniert die folgenden <b>Vorteile</b>:
-</p><ul>
- <li> Einheitlicher Aufbau fachlicher Workflows</li>
- <li> Einheitliche Projektverwaltung für Karten und Diagramme</li>
- <li> Einheitliche Verwaltung für Nutzereingaben</li>
- <li> Fachbezogene Sichten auf zentrale und fachbezogene
- Datenbestände</li>
- <li>Eingabeunterstützung durch unterschiedliche Widgets: Karten,
- Tabellen und Eingabefelder</li>
-</ul>
-<p></p>
-
-<a name="visualisierung-analyse"></a>
-<h2>Visualisierung &amp; Analyse</h2>
-
-<p>Mit adäquaten Diagrammtypen und Kartendarstellungen können
-raum-zeit-bezogene Daten visualisiert und miteinander verglichen
-werden. Diese ausschließlich über einen Browser parametrisierten
-Analysen ermöglichen Darstellungen von Zeitserien, Vertikal- und
-Horizontalprofilen, Profilschnitten, Horizontalschnitten, Histogrammen
-und vom Anwender generierten Kartenebenen.</p>
-
-<p>Um derartige Ergebnisse visualisieren zu können, wird zwischen
-Datenzugriff und den unterschiedlichen Ausgaben ein
-Prozessierungsschritt zwischengeschaltet. Hier werden sowohl 2D- und
-3D-Interpolationen als auch statistische Analysen gerechnet.
-Klassifizierungen und Isoliniendarstellungen werden ermittelt;
-Geometriedaten werden ausgeschnitten bzw. geclippt. Die jeweiligen
-Ergebnissen stehen über <b>offene Formate und Schnittstellen</b> zur
-weiteren Nutzung in unterschiedlichen Kontexten zur Verfügung:</p>
-
-<ul>
-    <li><b>CSV-Format:</b> Weiterverarbeitung in einer
-    Tabellenkalkulation</li>
-    <li><b>ODV-Format:</b> Weiterverarbeitung in der Fachsoftware OceanData
-    View des Alfred-Wegner Instituts</li>
-    <li><b>PNG/JPG-Format:</b> Einbindung in Publikationen oder Webseiten</li>
-    <li><b>PDF-Format:</b> Der Export liefert eine Vektordarstellung, so dass
-    diese u.a. für hochaufgelöste Druckprodukte genutzt werden
-    können.</li>
-    <li><b>SVG-Format:</b> Ein offenes und standardisiertes Vektorformat des
-    W3C Consortiums zur Einbindung in Zeichenprogramme, um
-    nutzerspezifische Darstellungen für hochaufgelöste Druckprodukte
-    herstellen zu können.</li>
-    <li><b>Shape-Format:</b> Ausgabe von Geometrie- und Sachdaten zur
-    weiteren Verarbeitung in anderen GIS-Programmen</li>
-    <li><b>WMS-Schnittstelle:</b> Publizieren der Kartendarstellungen für die
-    Integration in Geoportale oder desktopbasierte GI-Systeme</li>
-</ul>
-
-<p>Dive4Elements kann sowohl zur alltäglichen Arbeit als auch
-Durchführung von umfangreicheren wissenschaftlichen Analysen an jedem
-Arbeitsplatz über einen Browser genutzt werden.  Durch die
-o.g. Ausgabemöglichkeiten über offene Formate und
-Schnittstellen können die Ergebnisse in weitere Arbeitsprozesse
-eingebunden werden.</p>
-
-<br> Dive4Elements (1. Generation) wird vom <a href="http://www.bsh.de/">Bundesamt für Seeschifffahrt und Hydrographie</a> in Hamburg
-unterstützt.
-</p>
-
-<a name="entwicklung-download"></a>
-<h2>Entwicklung &amp; Download</h2>
-<p>Dive4Elements ist Freie Software. Der aktuelle Quellcode ist verfügbar in 
-einem <a href="http://wald.intevation.org/scm/?group_id=57">SCM-Repository</a>.
-</p>
-
-<p>
-<a href="http://lists.wald.intevation.org/mailman/listinfo/dive4elements-commits">
-SCM-Commit-Mailingliste abonnieren »</a>
-</p>
-
-
-<a name="technische-daten"></a>
-<h2>Technische Daten</h2>
-<ul>
-    <li>Nutzergeführte Fachdatenauswahl / Parameterisierung und
-    Speicherung</li>
-    <li>Templatebasierte Diagrammkomponente zur Visualisierung von
-    punkt-, linien-, flächenhafte Daten u.a. mit Isolinien</li>
-    <li>Rechenkern mit Interpolationsmethoden und Statistik</li>
-    <li>WMS-Generator, WMS-Dienst mit integriertem
-    OpenLayers-basierten Karten-Viewer</li>
-    <li>Umfangreiche Exportmöglichkeiten: CSV, ODV, PNG/JPEG,
-    vektorisierte PDFs, SVG, Shape</li>
-    <li>Durchgängige Mehrsprachigkeit von GUI bis Diagramm</li>
-    <li>Durchgängig auf Freier Software realisiert</li>
-    <li>Implementierung in Java (Server mit sog. REST-Schnittstelle,
-    WebClient mit Google Web Toolkit)</li>
-    <li>Nutzung von UMN MapServer als Kartenserver</li>
-    <li><a href="http://wald.intevation.org/projects/wsplgen/">WSPLGEN</a>
-    als sog. Wasserspiegellagengenerator</li>
-    <li>Anbindung gegen Oracle und PostgreSQL/PostGIS Datenbanken möglich</li>
-</ul>
-
-</div> <!-- end main -->
-
-
-<div id="sidebar"><h2><a href="http://dive4elements.org/index.html">Dive4Elements</a></h2>
-    <h3>Inhalt</h3>
-    <ul style="list-style-type: square; margin-left:-25px;
-        line-height: 23px;">
-	<li><a href="#was-ist-dive4elements">Was ist Dive4Elements?</a></li>
-        <li><a href="#visualisierung-analyse">Visualisierung &amp; Analyse</a></li>
-        <li><a href="#entwicklung-download">Entwicklung &amp; Download</a></li>
-        <li><a href="#technische-daten">Technische Daten</a></li>
-    </ul>
-</div>
-
-<!--div id="sidebar"><h2><a href="river.html">Dive4Elements River</a></h2>
-    <h3>Inhalt</h3>
-    <ul style="list-style-type: square; margin-left:-25px;
-        line-height: 23px;">
-        <li><a href="river.html#was-ist-dive4elements-river">Was ist Dive4Elements River?</a></li>
-        <li><a href="river.html#visualisierung-analyse">Visualisierung & Analyse</a></li>
-        <li><a href="river.html#entwicklung-download">Entwicklung & Download</a></li>
-        <li><a href="river.html#technische-daten">Technische Daten</a></li>
-    </ul>
-</div-->
-
-<div id="sidebar"><h3>Screenshots</h3>
-    <a href="img/screenshot1.png"><img src="gnv_files/screenshot1_small.png" width="220px"></a> 
-    <small>Zum Vergrößern auf das Bild klicken</small> 
-    <p>Webbasierte und graphische Nutzeroberfläche
-    von Dive4Elements mit der Darstellung der klassifizierten
-    Temperaturverteilung über die Tiefe in der Ostsee, dargestellt in
-    einem Profilschnitt</p>    
-    <br>
-    <a href="img/screenshot2.png"><img src="gnv_files/screenshot2_small.png"></a>
-    <small>Zum Vergrößern auf das Bild klicken</small>
-    <p>Kartenausschnitt, mit dynamisch errechneter horizontaler
-    Temperaturverteilung in Nord- und Ostsee; dargestellt als
-    Horizontalschnitt in Form eines temporär erzeugten
-    WMS-Dienstes</p>
-</div>
-
-<!--div id="sidebar" style="line-height: 20px"><h3>Kontakt / Impressum</h3>
-    <b>Intevation GmbH</b><br>
-    Neuer Graben 17<br>
-    49074 Osnabrück<br>
-    <a href="http://www.intevation.de" target="_blank">www.intevation.de</a><br>
-    <a href="mailto:intevation@intevation.de">intevation@intevation.de</a>
-</div-->
-
-<br clear="all">
-</div> <!-- end wrapper -->
-
-<div id="footer">
-   <br>
-   <div id="sitemap">
-       <p>Dive4Elements ist lizensiert unter der <a href="http://www.gnu.org/licenses/lgpl-2.1.html">GNU LGPL
-           v2.1</a>.</p>
-       © 2011 Intevation GmbH
-  </div>
-</div>
-
-
-</body></html>
Binary file gnv/gnv_files/screenshot1_small.png has changed
Binary file gnv/gnv_files/screenshot2_small.png has changed
--- a/gnv/gnv_files/style.css	Mon Mar 31 18:06:11 2014 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,102 +0,0 @@
-/* Styles for the DIVE4elements Website */
-
-body {
- font-family: arial, helvetica, sans-serif;
- font-size: 13px;
- background: #FFFFFF url('img/page_bg.png') repeat-x;
- color: #333333;
- margin: 0;
- padding:0px;
-}
-
-a {
- color: #b51a22;
- text-decoration: none;
-}
-
-a:hover {
- text-decoration: underline;
-}
-
-img {
- border: 0px;
-}
-
-.wrapper {
- width: 900px;
- margin: 0 auto;
- text-align: left;
-}
-
-#intro {
- padding: 30px 250px 20px 20px;
-}
-
-#intro h2 {
- font-family: georgia, times, serif;
- font-size: 30px;
- font-weight: normal;
- color: #333333;
- margin: 0px;
-}
-
-#intro p {
- color: #555555;
- font-size: 14px;
- font-weight: normal;
- line-height: 26px;
- margin: 10px 0 0;
- padding: 0;
-}
-
-#main {
- float: left;
- padding: 0px 0px 0px 20px;
- width: 600px;
-}
-
-#main h2 {
- font-size: 22px;
- font-weight: normal;
- color: #333333;
- margin: 30px 0px 10px 0px;
- padding: 0px;
- clear: both;
-}
-
-#main p, #main li{
- color: #444444;
- line-height: 20px;
- margin: 0px 0px 10px;
-}
-
-#sidebar {
- -moz-border-radius: 10px 10px 10px 10px;
- background: none repeat scroll 0 0 #EBEBEB;
- border: 1px solid #99b4c9;
- float: right;
- margin-top: 34px;
- padding: 20px 20px 15px;
- width: 220px;
-}
-
-#sidebar h3 {
- color: #333333;
- margin: 1px 0px 10px 0px;
-}
-#footer {
-    background: none repeat scroll 0 0 #EBEBEB;
-    color: #333333;
-    font-size: 11px;
-    height: 50px;
-    margin-top: 30px;
-    padding-bottom: 20px;
-    text-align: center;
-    width: 100%;
-}
-#sitemap {
-    margin: auto;
-    text-align: left;
-    width: 900px;
-    padding-left: 40px;
-}
Binary file gnv/img/screenshot1.png has changed
Binary file gnv/img/screenshot2.png has changed
Binary file img/gnv_karte.png has changed
Binary file img/gnv_profil.png has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ocean.html	Mon Mar 31 18:12:45 2014 +0200
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Dive4Elements</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta charset="utf-8">
+        <meta name="description" content="">
+        <meta name="author" content="Ariane Brörmann">
+        <!-- Bootstrap -->
+        <link href="bootstrap-3.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
+
+        <!-- Custom styles for this template -->
+        <link href="css/style.css" rel="stylesheet">
+
+        <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
+        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+        <![endif]-->
+
+        <!-- Bootstrap core JavaScript
+        ================================================== -->
+        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+        <!-- Include all compiled plugins (below), or include individual files as needed -->
+        <script src="bootstrap-3.1.0/dist/js/bootstrap.min.js"></script>
+        <script src="js/dive4elements.js"></script>
+    </head>
+    <body>
+        <div class="container">
+            <!--#include file="header.html" -->
+            <div class="row row-dive4elements row-dive4elements-right">
+              <!--#include file="ocean_body.html" -->
+            </div>
+            <!--#include file="footer.html" -->
+        </div> <!-- /container -->
+    </body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ocean_body.html	Mon Mar 31 18:12:45 2014 +0200
@@ -0,0 +1,46 @@
+<div class="col-xs-12">
+<div class="jumbotron">
+    <h3>Dive4Elements Ocean</h3>
+    <p class="lead">Dive4Elements Ocean ist eine datenbankbasierte Webapplikation
+      zur raum-zeitlichen Analyse von ozeanographischen Fachdaten.
+      Die Entwicklung wurde unter dem Namen Generischer Viewer (GNV)
+      vom <a href="http://www.bsh.de" target="_blank">Bundesamt für Seeschifffahrt und Hydrologie (BSH)</a> unterstützt.
+
+    <!-- Carousel -->
+    <!--#include file="ocean_carousel.html" -->
+</div><!-- /jumbobutton-->
+
+<div class="marketing">
+    <div>
+        <h4>Was ist Dive4Elements Ocean?</h4>
+         <p>Dive4Elements Ocean kombiniert vorgegebene Workflows (Arbeitsabläufe)
+            zur Ergebnis-/Informationsermittlung mit fachlich sinnvollen 
+            Möglichkeiten zur Ausgabe der ozeanographischen Ergebnisse.</p>
+
+        <h4>Verwendete Technologien</h4>
+        <p>
+          <ul>
+            <li>Dive4Elements als Framework</li>
+            <li><a href="http://www.postgresql.org/" target="_blank">PostgreSQL</a>/<a href="http://postgis.net/" target="_blank">PostGIS</a> und Oracle/Spatial über Hibernate</li>
+            <li>WMS-Dienste über <a href="http://mapserver.org/" target="_blank">MapServer</a></li>
+            <li><a href="http://openlayers.org/" target="_blank">OpenLayers</a> zur Darstellung interaktiver Karten</li>
+            <li><a href="http://www.mapfish.org/doc/print/" target="_blank">Mapfish Print</a> ermöglicht den Ausdruck dieser Karten als PDF</li>
+            <li><a href="http://www.gwtproject.org/" target="_blank">GWT</a>/<a href="http://code.google.com/p/smartgwt/" target="_blank">SmartGWT</a> für eine moderne AJAX-basierte Web-Oberfläche</li>
+            <li><a href="http://www.geotools.org/" target="_blank">GeoTools</a> für die standardkonforme Verarbeitung von Geo-Daten</li>
+            <li>Anbindung an Wiki-Technologie (realisiert mit <a href="http://moinmo.in/" target="_blank">MoinMoin</a>) zur Online-Dokumentation</li>
+          </ul>
+        </p>
+        <h4>Freie Software</h4>
+        <p>
+        Dive4Elements Ocean  gewährt die 
+        <a href="http://fsfe.org/about/basics/freesoftware.en.html" target="_blank">vier Grundfreiheiten Freier Software</a> und steht unter der <a href="http://www.gnu.org/licenses/lgpl-2.1.html" target="_blank">GNU Lesser General Public License (LGPL), Version 2.1</a> oder später.
+        <ul>
+          <li>Die Freiheit, das Programm für jeden Zweck auszuführen.</li>
+          <li>Die Freiheit, die Funktionsweise eines Programms zu untersuchen, und es an seine Bedürfnisse anzupassen.</li>
+          <li>Die Freiheit, Kopien weiterzugeben und damit seinen Mitmenschen zu helfen.</li>
+          <li>Die Freiheit, ein Programm zu verbessern, und die Verbesserungen an die Öffentlichkeit weiterzugeben, sodass die gesamte Gesellschaft profitiert.</li>
+        </ul>
+        </p>
+    </div>
+</div><!-- /row marketing -->
+</div>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ocean_carousel.html	Mon Mar 31 18:12:45 2014 +0200
@@ -0,0 +1,26 @@
+    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="10000">
+      <ol class="carousel-indicators">
+        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+        <li data-target="#myCarousel" data-slide-to="1"></li>
+      </ol>
+      <!-- Carousel items -->
+      <div class="carousel-inner">
+        <div class="item active">
+          <img src="img/gnv_profil.png" alt="Profilschnitt" class="img-responsive">
+          <div class="carousel-caption">
+            <p>Profilschnitt der klassifizierten Temperaturverteilung über die Tiefe in der Ostsee.</p>
+          </div>
+        </div>
+        <div class="item">
+          <img src="img/gnv_karte.png" alt="Horizontalschnitt" class="img-responsive">
+          <div class="carousel-caption">
+            <p>Kartenausschnitt mit dynamisch errechnetem Horizontalschnitt
+              der Temperaturverteilung in Nord- und Ostsee
+              (temporär erzeugter WMS-Dienst)</p>
+          </div>
+        </div>
+      </div>
+      <!-- Carousel nav -->
+      <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="glyphicon glyphicon-chevron-left"></span></a>
+      <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="glyphicon glyphicon-chevron-right"></span></a>
+    </div><!-- /myCarousel -->
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)