Mercurial > dive4elements > website
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 & 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 & 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 & Analyse</a></li> - <li><a href="#entwicklung-download">Entwicklung & 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>
--- 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; -}
--- /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 -->