{"id":11804,"date":"2016-01-29T11:20:46","date_gmt":"2016-01-29T10:20:46","guid":{"rendered":"https:\/\/www.interactive-pioneers.de\/blog\/?p=11804"},"modified":"2018-06-25T10:22:33","modified_gmt":"2018-06-25T08:22:33","slug":"relaunch-aachener-dom","status":"publish","type":"post","link":"https:\/\/www.interactive-pioneers.de\/blog\/relaunch-aachener-dom\/","title":{"rendered":"Relaunch Aachener Dom"},"content":{"rendered":"<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-11805\" src=\"https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2016\/01\/IP_Blogpost_Einstieg-415x250.jpg\" alt=\"Relaunch Aachener Dom Interactive Pioneers\" width=\"415\" height=\"250\" \/> Soeben hat der Dompropst mit dem Aachener Oberb\u00fcrgermeister auf einer gro\u00dfen Pressekonferenz den von uns konzipierten, gestalteten und entwickelten Relaunch des Internetauftritts vom <a href=\"http:\/\/www.aachenerdom.de\" target=\"_blank\" rel=\"noopener\">Aachener Dom<\/a> mit einem gro\u00dfen goldenen Knopf live geschaltet. <!--more--><\/p>\n<p><strong>Website im Auftrag des Herrn:<\/strong><br \/>\n<strong>Einzigartige Inszenierung des Aachener Doms mit faszinierender Grafik und raffinierter Technologie.<\/strong><\/p>\n<p>Der Aachener Dom ist seit 1978 das erste deutsche <a href=\"https:\/\/de.wikipedia.org\/wiki\/Aachener_Dom#Weltkulturerbe\" target=\"_blank\" rel=\"noopener\">UNESCO-Weltkulturerbe<\/a> und eines der beeindruckendsten Monumente der Menschheit. Interactive Pioneers durfte den neuen Internetauftritt der 1200 Jahre alten Kathedrale realisieren:<\/p>\n<p><a href=\"http:\/\/www.aachenerdom.de\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">www.aachenerdom.de<\/span><\/a><\/p>\n<p>Die einzigartige Faszination des von j\u00e4hrlichen 1,3 Mio Menschen besuchten Bauwerks galt es digital w\u00fcrdig zu Inszenieren, um so bei weiteren G\u00e4sten den Wunsch nach einem echten Besuch zu erwecken. <em>\u201cWichtigste Vorgabe f\u00fcr das Projektteam war Lust auf den Dom-Besuch zu machen, aber ihn nicht zu ersetzen\u201d<\/em>, so Carlo Matic Gr\u00fcnder und Gesch\u00e4ftsf\u00fchrer von Interactive Pioneers.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-11810\" src=\"https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2016\/01\/Website_Erlebnis_BarbarossaLeuchter-415x232.png\" alt=\"Website_Erlebnis_BarbarossaLeuchter\" width=\"415\" height=\"232\" \/><\/p>\n<p>Der vielschichtigen Bedeutung des Doms als Kirche, Denkmal, Museum, vor allem aber auch als nahbare Event- und Begegnungst\u00e4tte, galt es gerecht zu werden. Drei miteinander verwobene Bereiche wurden daf\u00fcr geschaffen:<\/p>\n<ul>\n<li>Ein Rundflug durch den Dom mit 7 ersten Stationen<\/li>\n<li>Eine Zeitreise durch die Historie des Weltkulturerbes<\/li>\n<li>Ein Informations-Portal mit aktuellen Informationen<\/li>\n<\/ul>\n<p>Die multilinguale Seite wurde mit HTML5 umgesetzt und verh\u00e4lt sich in allen Bereichen <a href=\"http:\/\/ami.responsivedesign.is\/?url=http%3A%2F%2Faachenerdom.de\" target=\"_blank\" rel=\"noopener\">responsiv<\/a>, passt sich also in der Gestaltung und Usability optimal auf das Ger\u00e4t des Nutzers an, egal ob PC, Tablet oder Smartphone.<\/p>\n<p><strong>Dom Erlebnis: 3D-Rundflug durch den Aachener Dom<\/strong><\/p>\n<p>Die spektakul\u00e4rste Neuerung der Seite ist ein <a href=\"https:\/\/www.aachenerdom.de\/dom-erlebnis\/virtueller-3d-rundflug\/\" target=\"_blank\" rel=\"noopener\">Rundflug<\/a> aus der Egoperspektive durch die alte Kathedrale aus der Zeit von Karl dem Gro\u00dfen. Der User gelangt so auch an Punkte, die ein Besucher so nie oder nur in F\u00fchrungen sehen kann.Eine besondere Herausforderung war, dass weder ein Dreh mit Kamera und noch mit Drohne in dem sensiblen Geb\u00e4ude gestattet ist.<\/p>\n<p>Mit Hilfe besonderer Hightech der RWTH Aachen gelang die Umsetzung dennoch: Das Institut f\u00fcr <a href=\"https:\/\/www.vci.rwth-aachen.de\/\" target=\"_blank\" rel=\"noopener\">Visual Computing<\/a> verf\u00fcgt \u00fcber einen der modernsten 3D Laser-Scanner, mit dem das Geb\u00e4ude in Kombination mit HDR-Fotografie eingescannt werden konnte. Auf Basis dieser Daten konnten wir eine freie Kamerafahrt bestimmen, die die Grundlage f\u00fcr den Rundflug darstellt.<\/p>\n<p>Der User steuert den Flug mit dem Scrollrad seiner Maus oder der Tastatur. Wahlweise kann er sich zur\u00fccklehnen und den Flug laufen lassen. An sieben Stationen h\u00e4lt der Film und pr\u00e4sentiert dem User mehr Informationen \u00fcber Barbarossa-Leuchter, Kuppelmusaik, Pala d\u00b4Oro, Marienschrein, Karlsschrein, Chorhallenfenster und schlie\u00dflich den Karlsthron.<\/p>\n<p>Mit einem intelligenten Ladeverhalten kann der User trotz gro\u00dfer Bilddaten schnell starten. Hochaufl\u00f6sende Bilder werden an jedem Stop, den der Betrachter einlegt, in der idealen Aufl\u00f6sung des Ger\u00e4tes nachgeladen. Besonders eindrucksvoll wirkt der Rundflug im Vollbild-Modus und mit eingeschaltetem Ton. Eine musikalische Untermalung verst\u00e4rkt die cineastische Atmosph\u00e4re.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Dom Geschichte: Zeitreise durch die Jahrhunderte<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-11813\" src=\"https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2016\/01\/Website_geschichte_PalaDoro-415x232.png\" alt=\"Website_geschichte_PalaDoro\" width=\"415\" height=\"232\" \/><\/p>\n<p>Die zweite S\u00e4ule ist ein kompakter, historischer Abriss durch alle 12 Jahrhunderte von der Erbauung des Doms unter Kaiser Karl dem Gro\u00dfen bis zu den j\u00fcngsten Restaurierungsma\u00dfnahmen. Mit historischen Bildmotiven und kurzweiligen Texten der Historikerin Kathrin Steinhauer werden die wichtigsten Schlaglichter in der reichen Geschichte des Aachener Doms hervorgehoben und dem User mediengerecht dargeboten.<\/p>\n<p>Der vertikal laufende <a href=\"https:\/\/www.aachenerdom.de\/dom-geschichte\/die-geschichte-des-aachener-doms\/\" target=\"_blank\" rel=\"noopener\">Zeitstrahl<\/a> erstreckt sich \u00fcber eine einzige Seite und wird effektvoll durch Parallax-Animationen in Szene gesetzt. Der Zeitstrahl kann per Mausrad oder Tastatursteuerung navigiert werden. Zudem verschafft ein seitlich mitlaufendes Men\u00fc zus\u00e4tzliche Orientierung und die M\u00f6glichkeit, ein Ereignis direkt anzusteuern. Auch er wirkt im Fullscreen Modus besonders eindrucksvoll.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Dom aktuell: Portalbereich mit Besucherinformationen<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-11814\" src=\"https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2016\/01\/Website_Portal_Startseite-415x230.png\" alt=\"Website_Portal_Startseite\" width=\"415\" height=\"230\" \/><\/p>\n<p>Der <a href=\"https:\/\/www.aachenerdom.de\/dom-aktuell\/startseite\/\" target=\"_blank\" rel=\"noopener\">Portalbereich<\/a> ist die erste Anlaufstelle f\u00fcr alle, die den Dom besuchen m\u00f6chten, und gibt Auskunft \u00fcber \u00d6ffnungs- und Gottesdienstzeiten, M\u00f6glichkeiten zur Besichtigung oder sowie Veranstaltungen. Die neuesten Meldungen des Domkapitels und seiner Einrichtungen werden dargestellt; gro\u00dfformatige Bildergalerien sorgen f\u00fcr eine visuelle Untermalung einzelner Themen.<\/p>\n<p>Das <a href=\"http:\/\/ami.responsivedesign.is\/?url=https%3A%2F%2Fwww.aachenerdom.de%2Fdom-aktuell%2Fstartseite%2F\" target=\"_blank\" rel=\"noopener\">adaptiv-responsive<\/a> Design der Website wird anhand des Kachel Layouts im Portalbereich besonders sch\u00f6n deutlich: Je nach Ger\u00e4tetyp und Viewportgr\u00f6\u00dfe wird er \u00fcber ein f\u00fcnf- bis einspaltiges Raster dargestellt.<\/p>\n<p>Zur multilingualen redaktionellen Pflege setzten wir das Content Management System WordPress ein, das wir auf die individuellen Anforderungen des Domkapitels anpassten: Alle Termine rund um den Dom &#8211; von Gottesdiensten bis zu Orgelkonzerten &#8211; lassen sich ebenso kategorisiert pflegen wie thematisch geordnete Bildergalerien. Alle Inhalte k\u00f6nnen in vier Sprachen ausgeliefert werden: deutsch, englisch, franz\u00f6sisch und niederl\u00e4ndisch. Weitere Sprachversionen sind vorgesehen. Selbst die Steuerung und inhaltliche Pflege des Rundflugs und des Zeitstrahls erfolgen \u00fcber die Admin-Oberfl\u00e4che des CMS.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Keep it simple: das Navigationskonzept<\/strong><\/p>\n<p>Ein seitlich ausfahrbares Men\u00fc, das sich unabh\u00e4ngig von der Ger\u00e4teart und -Gr\u00f6\u00dfe \u00fcber alle drei Seitenbereiche hinweg immer identisch darstellt, gibt dem User stets die perfekte Orientierung und die M\u00f6glichkeit, ohne Umschweife klassisch durch alle Bereiche zu navigieren.<\/p>\n<p><strong>Kreation und visuelle Inszenierung<\/strong><\/p>\n<p>Unserem Website-Design liegen zwei Grundgedanken und -formen zugrunde: eine strenge Kreuzsymmetrie sowie eine oktogonale Figur. Beide Leitmotive greifen das wichtigste Symbol des Christentums, das sich auch im Logo des Domkapitels wiederspiegelt, sowie die architektonische Leitlinie des Aachener Doms auf.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-11827\" src=\"https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2016\/01\/1-04_PalaDoro_3200-415x259.jpg\" alt=\"1-04_PalaDoro_3200\" width=\"415\" height=\"259\" \/><\/p>\n<p>Besonderes Augenmerk schenkten wir der visuellen Inszenierung der Rundflugstationen sowie der historischen Ereignisse. Mittels aufw\u00e4ndiger HDR-Fotografie und anschlie\u00dfender Feinretusche konnten wir trotz der nicht unproblematischen Beleuchtungssituation und der vielen reflektierenden Fl\u00e4chen im Dom ein perfekte Lichtstimmung erzeugen und feinste Details in den teilweise sehr filigran gestalteten Kunstsch\u00e4tzen hervorholen. Die f\u00fcr den Zeitstrahl aufbereiteten Motive erfuhren zus\u00e4tzlich eine aufw\u00e4ndige Freistellung. Besonders eindrucksvoll l\u00e4sst sich dies am Barbarossaleuchter und den goldenen Schreinen ablesen.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Aus der Realit\u00e4t ins Modell: 3D Laser-Scan und HDR Foto-Layering<\/strong><\/p>\n<p>Das einzigartige Verfahren des Lehrstuhls Computer Graphics and Multimedia von Prof. Leif Kobbelt ist eine Kombination aus HDR-Fotografie und 3D Laserscanning. Die resultierenden Punktwolken werden durch ein spezielles Visualisierungsverfahren als geschlossenes Oberfl\u00e4chenmodell dargestellt und mit hoch aufl\u00f6senden Fotos koloriert. So kann man im Endresultat ein Beleuchtungsmodell integrieren und realistische Reflexionen und Lichtverh\u00e4ltnisse mit Schatten darstellen.<\/p>\n<p>Insgesamt wurden 105 einzelne Scans und 1329 Fotos mit 1.3 Mrd. Messpunkten in einer Nacht und 5 Stunden aufgenommen. Der aufbereitete Datensatz besteht aus 66 Mio Punkten und 2.4 GB komprimierten Texturen, die das System in Echtzeit darstellen kann.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Betrieb<\/strong><\/p>\n<p>Auch Betrieb der Seite stammt aus Aachen in der bew\u00e4hrten Kooperation mit <a href=\"http:\/\/synaix.de\/de\/\" target=\"_blank\" rel=\"noopener\">synaix<\/a>. Die erfahrenen Kollegen haben u.a. unsere Anforderungen ein modernes Backend mit Docker zu betreiben umgesetzt und ein Content Delivery Network f\u00fcr die schnelle Auslieferung der Daten bereitgestellt.<\/p>\n<p><strong>Kommunikation<\/strong><\/p>\n<p><a href=\"http:\/\/power-radach.de\/\" target=\"_blank\" rel=\"noopener\">POWER+RADACH<\/a> (unsere Turmmitbewohner und Partner) wurden mit der gesamten Domkapitel-Kommunikation beauftragt, dessen erster Ausdruck dieser Relaunch ist. Die Full-Service-Werbeagentur hat parallel auch die Satellitenseiten der Domsingschule, Dommusik und Dombauh\u00fctte erneuert. Gesch\u00e4ftsf\u00fchrer Bernd Steinbrecher dazu: \u201cModern. Nahbar. Offen. So, wie sich die Einrichtungen des Domkapitels zeigen, pr\u00e4sentieren sie sich nun auch im Web.\u201c<\/p>\n<p>Weitere Details zu diesem auch f\u00fcr uns besonderen Projekt wie Technologie, 3D Scan, HDR Bildaufbereitung sowie ein Mitschnitt der Pressekonferenz folgen hier in den n\u00e4chsten Tagen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Soeben hat der Dompropst mit dem Aachener Oberb\u00fcrgermeister auf einer gro\u00dfen Pressekonferenz den von uns konzipierten, gestalteten und entwickelten Relaunch des Internetauftritts vom Aachener Dom mit einem gro\u00dfen goldenen Knopf live geschaltet.<\/p>\n","protected":false},"author":4,"featured_media":11812,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,4,1366,23,1331,1351,1369,1367,1349,25],"tags":[46,329,1373,1268],"yst_prominent_words":[5029,1756,13292,13270,13293,13295,1788,13280,13275,13298,13299,13300,13301,1387,13291,13296,13294,11138,1392,13297],"acf":[],"_links":{"self":[{"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/posts\/11804"}],"collection":[{"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/comments?post=11804"}],"version-history":[{"count":0,"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/posts\/11804\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/media\/11812"}],"wp:attachment":[{"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/media?parent=11804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/categories?post=11804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/tags?post=11804"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=11804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}