projekt-2019.html

---
layout: projekt
result-snippet: false
hero: assets/images/projekt-2019-hero.jpg
title: Projekt 2019
subtitle: Lucas Cranach Timeline
---
<section class="section">
  <div class="container">
    <div class="content is-medium has-seperator">
      <p>Das diesjährige Projekt dreht sich um das <a href="http://lucascranach.org/index.php">Cranach Digital Archive (CDA)</a>, eine Initiative der Stiftung Museum Kunstpalast, Düsseldorf und der Technischen Hochschule Köln in Zusammenarbeit mit über 270 Museen, Forschungseinrichtungen und Kirchgemeinden in 30 Ländern, gefördert durch die Andrew W. Mellon Foundation.
      </p>
      <p>Im Oktober 2009 begannen acht große Museen in Europa und den USA gemeinsam mit dem Museum Kunstpalast in Düsseldorf und der Technischen Hochschule Köln ein Forschungsprojekt zur digitalen Erschließung der Gemälde eines der bedeutendsten Maler der deutschen Renaissance: Lucas Cranach der Ältere. Gefördert wird das Projekt von der Andrew W. Mellon Foundation als Teil einer größeren Initiative, deren Ziel es ist, eine internetbasierte Infrastruktur für den Austausch und die Vermittlung neuer kunsthistorischer, technologischer und naturwissenschaftlicher Forschungsergebnisse zu entwickeln, welche die Grenzen von Institutionen und internationalen Grenzen überschreitet. Der umfangreiche Fundus an Bild- und Textinformationen soll der Öffentlichkeit ein tieferes Verständnis der Kunst Lucas Cranachs ermöglichen und die Forscher künftig dabei unterstützen, u.a. Fragen zu Zuschreibung und Werkstattorganisation zu beantworten.</p>

      <p>Das Cranach-Forschungsprojekt befindet sich derzeitig in seiner dritten Phase. Ziel dieser Phase vermehren, um das Fundament für eine innovative, umfassende und gemeinschaftliche Quelle des Wissens über Lucas Cranach und seine Werkstatt zu legen, die sich signifikant von dem traditionellen Modell eines Werkkataloges unterscheidet.</p>
    </div>
    <!--div class="js-video widescreen">
      <iframe width="1280" height="700" src="https://www.youtube.com/embed/eDvCuqXlmjw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div-->
    <figure>
    <img src="../assets/images/timelines.jpg" alt="Collage mit Timelines">
    </figure>
    
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="content is-medium">

      <div class="box">
        <div class="columns">
          <div class="column is-one-third">
            <h2>Screendesign Projektaufgabe</h2>
          </div>

          <div class="column">
            <p>
              Entwickeln Sie ein Gestaltungskonzept für die Time-Ansicht im Cranach Digital Archive. Nutzen Sie das gegebene Gestaltungskonzept (wird noch verlinkt) und bauen Sie Ihren Entwurf darauf auf. 
            </p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="content">
      <h2 class="title">Lucas Cranach Timeline</h2>
      <p>
        Die folgenden Informationen wurden von einem Projektteam des Medieninformatik Masters erarbeitet. Dies geschah in Form von verschiedenen Interviews mit assoziierten Partnern (z.B. <a href="https://www.th-koeln.de/personen/gunnar.heydenreich/">Prof. Dr. Gunnar Heydenreich </a>, dem Leiter des <a href="http://lucascranach.org/index.php">Digital Archives</a>), als auch in Form eines einwöchigen Design Sprints. Weiterhin können Sie die Sprintergebnisse im <a href="https://github.com/BenPag/cranach/wiki">GitHub-Wiki</a> des Master-Projektes einsehen.
      </p>

      <h3>Cranach und seine Werke</h3>
      <p>
        Der Name Lucas Cranach beschreibt zwei Personen, Lucas Cranach den Älteren und seinen Sohn Lucas Cranach den Jüngeren, wobei sich dieses Projekt vorwiegend auf ersteren bezieht. Dieser lebte im Zeitalter der Renaissance und war neben der Malerei auch als Grafiker und Buchdrucker tätig (er besaß später sogar eine Apothekerzulassung). Zu diesem Zwecke gründete er ein "Unternehmen" mit einigen Angestellten, welches als erstes seiner Art in Deutschland die Massenproduktion von Bildern fokussierte. Zusätzlich begeisterte er sich für die Politik, was durch den engen Kontakt zu Matin Luther unterstützt wurde. Dies spiegelte sich auch unter anderem in seinen Werken wieder. Häufig sind zudem religiöse Motive aufzufinden, da ein Großteil seiner Auftraggeber einen geistlichen Hintergrund besaß.
      </p>
      <p>
        Im <a href="http://lucascranach.org/index.php">Cranach Digital Archive</a> befinden sich zur Zeit knapp 2000 Werke unterschiedlicher Kategorien. Zu diesen Kategorien gehören momentan Gemälde, Archivalien und ältere, sowie neue Literatur rund um das Thema Cranach. In Zukunft sollen diese Kategorien unter anderem um Drucke und Zeichnungen erweitert werden. Zu jedem Gemälde finden sich zudem unterschiedliche Ansichten, hier auch Infrarotaufnahmen, welche unterliegende Schichten sichtbar machen und so den Erstellungsprozess dokumentieren.
      </p>

      <h3>Zielsetzung des Timeline-Projektes</h3>
      <p>
        In diesem Projekt soll eine alternative Präsentation (Zugang) der Werke in Form eines Zeitrahls geschaffen werden, welche als Ergänzung zum bestehenden Archiv fungiert. Hier ist besonders die Masse an Werken, sowie die Navigation durch diese zu beachten. Neben der reinen Darstellung soll jedoch auch eine Kontextualisierung der Werke stattfinden. Im Gegensatz zum <a href="http://lucascranach.org/index.php">Cranach Digital Archive</a>, in welchem Werke nur innerhalb der Kategorien separiert vorliegen, gilt es hier die verschiedenen Kategorien miteinander in Bezug zu bringen.
        <br> Zudem ist eine Anreicherung der bestehenden Daten mit weiteren Informationen erwünscht, sodass beispielsweise historische Rahmenbedingungen, Ereignisse oder Personen in Verbindung mit den Werken gebracht werden könnten (mehr hierzu in späteren Kapiteln). Allgemein sollte jedoch zunächst darauf geachtet werden, bereits vorhandene Informationen einzubetten, bevor mit einer Anreicherung begonnen wird. Da die Kategorie "Literatur" vorwiegend aktuelle Forschungsergebnisse beinhaltet, gilt auch diese eher als ergänzendes Material. Somit sollte sie nicht in dem Zeitstrahl selbst visualisiert, allerdings von zugehörigen Werken referenziert werden.
      </p>
      <p>
        Die ganze Webseite soll allgemein in zwei Ebenen aufgeteilt sein. Die Einstiegsseite, welche den Zeitstrahl und lediglich die wichtigsten Informationen bereitstellt, sowie eine Detailebene, welche weiterführende Informationen und Verbindungen beinhaltet. Wichtig ist zudem, dass dieser Zeitstrahl und die ihn umgebende Webseite eine Ergänzung zum <a href="http://lucascranach.org/index.php">Cranach Digital Archive</a> darstellen soll und demnach endgültig für Detailinformationen zu einem Werk auf das bestehende Archiv verweisen / verlinken sollte. Es gilt nicht die bestehende Seite zu ersetzen. Durch diese Alternative / Erweiterung soll neben einer <strong>gezielten Suche</strong> einzelner Werke auch eine
        <strong>explorative Erkundung</strong> unterstützt werden. Hierdurch wird sich eine Nutzung der Seite durch ein größeres Nutzerspektrum erhofft, was auch Kunstlaien / Personen anderer Fachgebiete einbeziehen soll (ebenfalls in einem späteren Abschnitt erläutert).
      </p>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="content">
      <h2>Datenstrukturen der öffentlichen API</h2>
      <p>
        Momentan ist die öffentliche API noch nicht vollständig implementiert. Damit Sie dennoch eine Vorstellung davon haben, welche Daten Ihnen bereitstehen und welche Sie somit in Ihr Design einbeziehen können, folgt eine Auflistung der wichtigsten Eigenschaften eines Werkes:
      </p>
      <ul>
        <li>
          <p><strong>Titel</strong></p>
        </li>
        <li>
          <p>Zuschreibung</p>
        </li>
        <li>
          <p><strong>Bild URLs</strong></p>
        </li>
        <li>
          <p><strong>Signatur / Datierung</strong> (Datierungen sind selten eindeutig und stellen somit meist eine Zeitspanne dar)</p>
        </li>
        <li>
          <p><strong>Eigentümer / Besitzer / Standort</strong></p>
        </li>
        <li>
          <p>Maße</p>
        </li>
        <li>
          <p>Bildträger</p>
        </li>
        <li>
          <p>Inschriften / Stempel / Siegel / Beschriftungen</p>
        </li>
        <li>
          <p>Kurzbeschreibung</p>
        </li>
        <li>
          <p>Provenienz</p>
        </li>
        <li>
          <p>Ausstellungen</p>
        </li>
        <li>
          <p>Quellen / Publikationen</p>
        </li>
        <li>
          <p>Forschungsgeschichte / Diskussion</p>
        </li>
        <li>
          <p>Material / Technik</p>
        </li>
        <li>
          <p>Erhaltungszustand</p>
        </li>
        <li>
          <p>Restaurierungsgeschichte</p>
        </li>
      </ul>
      <p>
        Dies sind lediglich Hinweise und stellen die Informationen nicht in ihrer Gänze dar. Eine eigene Recherche ist somit immer noch benötigt.
        <strong>Markierte</strong> Eigenschaften gelten für Kunstexperten laut <a href="https://www.th-koeln.de/personen/gunnar.heydenreich/">Prof. Dr. Gunnar Heydenreich </a> als wichtigste Informationen für den ersten Eindruck.
      </p>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="content">
      <h2>Stakeholder</h2>
      <p>
        Folgende Stakeholder sind für das Screendesign Projekt relevant:
      </p>
      <table class="table">
        <thead>
          <tr>
            <th width="17%">Stakeholder</th>
            <th width="30%">Kontext und Ziel der Nutzung</th>
            <th width="17%">Art der Suche</th>
            <th width="36%">Benötigte Informationen</th>
          </tr>
        </thead>
        <tbody>

          <tr>
            <td>Kunstinteressierte Laien</td>
            <td>Bilder betrachten und spezifische Informationen durchlesen um einen Überblick zu erhalten</td>
            <td>explorativ</td>
            <td>Wissen zu Bildern anzeigen, evtl. historische Zusammenhänge verdeutlichen (Bilder, Hintergrundinformationen, visuelle Verbindungen, Verlinkungen ...)
            </td>
          </tr>

          <tr>
            <td>Lehrer & Professoren</td>
            <td>Informationssammlung für die Lehre</td>
            <td>explorativ / gezielt</td>
            <td>Für den Unterricht relevante Informationen sammeln und ggf. in einer geeigneten Darstellung abrufen (Bilder, Informationen zu Bildern, historischer Kontext (abhängig von Lehrstoff) ...)
            </td>
          </tr>

          <tr>
            <td>Schüler & Studenten</td>
            <td>Informationssammlung für eigene Ausarbeitungen / Aufsätze etc.</td>
            <td>explorativ</td>
            <td>Unterschiedliche Ansätze erfordern eine große Varietät der Daten (Hintergrundinformationen, Ort, Datum, Kontext, ggf. Rangfolge der Bilder ...)
            </td>
          </tr>

          <tr>
            <td>Bühnenbildner</td>
            <td>Informationssammlung und Vergleiche für die Erstellung von Bühnenbildern</td>
            <td>explorativ / gezielt</td>
            <td>Informationen zu Einrichtungen und Umgebungen einer bestimmten Zeit (Jahreszahlen, Bilder, Orte ...)
            </td>
          </tr>

          <tr>
            <td>Kostümdesigner</td>
            <td>Informationssammlung und Vergleich alter Kleidung für eigene Kreationen</td>
            <td>explorativ / gezielt</td>
            <td>Informationen zur Kleidung und Accessoires bestimmter Personengruppen zu einer bestimmten Zeit (Jahreszahlen, Bilder, abgebildete Personen, Ort ...)
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="content">
      <h2>Exploration und Anreicherung von Informationen</h2>
      <p>
        Wie bereits erläutert soll eine explorative Durchsuchung des Themenfeldes ermöglicht werden. Hierzu zählt neben der visuellen Verbindung zusammengehöriger Daten auch die Anreicherung und Verlinkung ebenjener Datensätze / Werke. Die folgende Tabelle listet einige der möglichen Anhaltspunkte zur Schaffung solcher Verbindungen auf:
      </p>

      <table class="table">
        <thead>
          <tr>
            <th width="33%">Mögliche Informationsergänzungen</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Personen</td>
            <td>
              Personen, mit welchen Cranach in Kontakt stand, könnten seine Werke geprägt haben. Hierzu zählen Freunde, Auftraggeber, Motive und viele weitere. Drei große Persönlichkeiten, mit welchen Cranach viel Kontakt hatte, waren
              <a href="https://de.wikipedia.org/wiki/Friedrich_III._(Sachsen)">König Friedrich der Weise</a> (einer seiner größten Auftraggeber), <a href="https://de.wikipedia.org/wiki/Martin_Luther">Martin Luther</a> und Luthers "Gegenspieler"
              <a href="https://de.wikipedia.org/wiki/Albrecht_von_Brandenburg">Albrecht von Brandenburg</a>.
            </td>
          </tr>

          <tr>
            <td>Ereignisse</td>
            <td>
              Historische Ereignisse zu Lebzeiten Cranachs könnten sich in seinen Werken wiederspiegeln. Hierzu zählen wichtige persönliche Meilensteine, aber auch ihn umgebende Ereignisse wie Kriege, Krankheiten, Machtverhältnisse und allgemeine Umstände / Lebensbedingungen. Solche Informationen könnten neben Motiven auch seinen allgemeinen Zeichen- / Malstil beeinflusst haben.
            </td>
          </tr>

          <tr>
            <td>Gemälde / Kunstwerke derselben Zeit</td>
            <td>
              Die Gemälde / Kunstwerke anderer Künstler derselben Zeit könnten Aufschluss über Cranachs Malstil bieten. Hier sollten, laut <a href="https://www.th-koeln.de/personen/gunnar.heydenreich/">Prof. Dr. Gunnar Heydenreich</a>, jedoch lediglich Künstler aus Europa berücksichtigt werden.
            </td>
          </tr>

          <tr>
            <td>Geographische Informationen</td>
            <td>
              Für die Analyse eines Werkes kann der Ort, in welchem dieses entstand, von hoher Bedeutung sein. Ebenso könnte der heutige Aufenthaltsort für eine Großzahl von Nutzern interessant sein (z.B. Wo befinden sich am meisten Werke, welche ich bei meinem nächsten Urlaub sehen möchte?).
            </td>
          </tr>

          <tr>
            <td>Heutige wissenschaftliche Erkenntnisse</td>
            <td>
              Heutige wissenschaftliche Erkenntnisse könnten Laien etwas mehr über den Kontext eines Werkes verraten. Hier wurde jedoch davon abgeraten, eigene Recherchen anzustellen. Stattdessen solle man zu diesem Zweck die vorhandenen Literaturen des Archivs nutzen.
            </td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="content">
      <h2>Mengengerüst</h2>
      <p>
        Folgendes Mengengerüst ist zu berücksichtigen:
      </p>

      <table class="table">
        <thead>
          <tr>
            <th width="33%">Inhaltstyp</th>
            <th>Mengen</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Gemälde</td>
            <td>
              Objekte: 2500<br>
              Abbildungen: 20.000
            </td>
          </tr>

          <tr>
            <td>Grafiken</td>
            <td>
              Objekte: 5000<br>
              Abbildungen: 20.000
            </td>
          </tr>

          <tr>
            <td>Archivalien</td>
            <td>
              Objekte: 2000
            </td>
          </tr>

          <tr>
            <td>Literatur</td>
            <td>
              Objekte: 5000
            </td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="content">
      <h2>Funktionsumfang und Eigenschaften</h2>
      <p>
        Bei der Erstellung Ihres Konzepts sollten Sie folgende Funktionalitäten und Eigenschaften berücksichtigen.
      </p>

      <table class="table">
        <thead>
          <tr>
            <th width="33%">Must-Have</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Übersichtlichkeit</td>
            <td>
              Es liegt eine riesige Menge von Daten vor, welche es zu visualisieren gilt. Dennoch sollte die Darstellung, die Sie wählen einen Überblick über diese Daten ermöglichen und den Nutzer nicht überfordern. Das Produkt ist für ein großes Spektrum von Nutzern gedacht und nicht nur für erfahrene PC-Nutzer.
            </td>
          </tr>

          <tr>
            <td>Navigation</td>
            <td>
              Eine einfache und natürliche Navigation durch den Zeitstrahl ist ein Muss. Um gezielte Suchen zu unterstützen, muss demnach auch ein gezielter Zeitraum ausgewählt werden können. Für explorative Ansätze könnte ein Zoom und ein Scrolling durch den Zeitstrahl hilfreich sein.
            </td>
          </tr>

          <tr>
            <td>Filterung</td>
            <td>
              Als Ergänzung zur Navigationen sollten Filter ermöglicht werden, welche den angezeigten Datenbestand weiter eingrenzen. So könnte eine Schlagwortsuche sinnvoll sein, ebenso wie weitere Felder, welche die Filterung anhand von Kategorien ermöglichen. Es gibt beispielsweise bereits eine <strong>Auswahl der 100 besonders relevanten Werke</strong>. Weitere mögliche Anhaltspunkte sind der Entstehungs- und Aufbewahrungsort, der Auftraggeber, das Motiv, die Zuschreibung und was Ihnen sonst noch einfällt.
            </td>
          </tr>

          <tr>
            <td>Exploration vs. gezielte Suche</td>
            <td>
              Wie bereits angesprochen, sollte neben einer gezielten Suche auch die Exploration des Datenbestandes ermöglicht werden. Die gezielte Suche richtet sich hierbei mehr an das Feld der Kunstexperten und Künstler, während explorative Ansätze zu einer gesteigerten Nutzung der Webseite durch Kunstlaien führen sollen.
            </td>
          </tr>

          <tr>
            <td>Einbindung der Literatur</td>
            <td>
              Die bestehende Literatur sollte weiterhin eingebunden und von thematisierten Werken referenziert werden. Sie sollte nicht im Zeitstrahl selbst auftauchen.
            </td>
          </tr>
        </tbody>
      </table>

      <table class="table">
        <thead>
          <tr>
            <th width="33%">Nice-To-Have</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Aktuelle Standorte</td>
            <td>
              Zu jedem Werk wird ein aktueller Aufenthaltsort angegeben. Es könnte hierbei für gewisse Nutzergruppen sinnvoll sein, diese Standorte zentralisiert darzustellen, um somit einen Überblick zu ermöglichen. Dies könnte beispielsweise genutzt werden, um eine der folgenden Fragen zu beantworten:
              <ul>
                <li>
                  Wo befinden sich die meisten Werke, welche ich in meinem nächsten Urlaub anschauen möchte?
                </li>
                <li>
                  Welche Werke kann ich in meiner Umgebung finden?
                </li>
                <li>
                  Wo muss ich hinfahren, um meine Lieblingsgemälde sehen zu können?
                </li>
              </ul>
            </td>
          </tr>

          <tr>
            <td>Auf Neuerungen hinweisen</td>
            <td>
              Nutzer, welche die Seite in regelmäßigen Abständen aufrufen, könnten auf neue Inhalte oder Funktionen hingewiesen werden. Dies könnte über dedizierte Bereiche innerhalb der Webseite geschehen, aber auch über Mechanismen wie beispielsweise Newsletter.
            </td>
          </tr>

          <tr>
            <td>Presets</td>
            <td>
              Für unterschiedliche Stakeholder sind unterschiedliche Aspekte relevant. So könnten für unterschiedliche Nutzungsziele auch unterschiedliche Voreinstellungen angeboten werden.
            </td>
          </tr>


          <tr>
            <td>Glossar</td>
            <td>
              In einer Art Glossar sollten Informationen zu Mal- und Produktionstechniken geboten werden. Diese gilt es anschließend innerhalb der Informationsseite eines Werkes zu referenzieren. Weitere mögliche Glossareinträge könnten Farben / Pigmente, Materialien oder Ähnliches behandeln. Es muss hierbei kein herkömmliches Glossar eingebunden werden. Überlegen Sie sich eine Möglichkeit, solche Informationen Ihrem Design entsprechend einzubinden.
            </td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
</section>


<section class="section">
  <div class="container">
    <div class="content">
      <h2>Endgeräte</h2>
      <p>
        Im Folgenden finden Sie die zu unterstützende Endgeräte:
      </p>

      <table class="table">
        <thead>
          <tr>
            <th width="33%">Endgerät</th>
            <th>Nutzungsumfang</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>PC / Laptop / Tablet</td>
            <td>
              Dies ist das hauptsächliche Endgerät für Experten und viele andere Nutzergruppen. Aufgrund der großflächigen Visualisierungsmöglichkeiten sollte hier der volle Funktionsumfang eingebracht werden. Berücksichtigen Sie bitte auch Interaktionen via Touchdisplay.
            </td>
          </tr>

          <tr>
            <td>Großer Touchscreen</td>
            <td>
              Die Timeline soll auch im Museum zum Einsatz kommen können. Hierzu muss das Layout auf einem großen Touchscreen Monitor lauffähig sein. Dieser ist wie folgt spezifiziert: 218 cm(86 Zoll) 16:9, 3840x2160px Auflösung.
            </td>
          </tr>

          <tr>
            <td>Smartphone</td>
            <td>
              Smartphones werden von den befragten Experten nur sehr selten zur Recherche eingesetzt. Sie nutzen diese lediglich, um auf die Schnelle spezifische Gemälde aufzurufen. Für diese Nutzergruppe benötigt solch eine Version also nur ein stark reduziertes Feature Set. Jedoch könnte gerade für die Gruppe der Kunstlaien dieses Endgerät eine größere Rolle darstellen (gerade für Schüler / Studenten). Hier gilt es zu überlegen, ob eine mobile Version sinnvoll wäre und wie man die Informationen, trotz der stark reduzierten Oberfläche, sinnvoll und übersichtlich präsentieren kann.
            </td>
          </tr>

          
        </tbody>
      </table>

      <p>Bitte entwickeln Sie ein Konzept für *zwei* dieser Endgeräte, z.B. Smartphone und Tablet</p>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="content  has-seperator">
      <h2>Erforderliche Screens/ Elemente</h2>
      <p>Welche Screens/ Elemente sind zu gestalten, welche Aufgabe haben sie und welche Funktionen enthalten sie?</p>
      <table class="table">
        <thead>
          <tr>
            <th width="33%">Funktionsgruppe/ Screen/ Element</th>
            <th>Funktion/ Erläuterung</th>
          </tr>
        </thead>
        <tbody>

          <tr>
            <td>Screen: Timeline</td>
            <td>
              Dies ist der Hauptscreen des Timeline Zugangs.
              <hr>
              <strong>Timeline: </strong>Eine zeitlich sortierte Grundstruktur für die Artefakte.
              <hr>
              <strong>Timeline Zoom: </strong>Eine Zoomfunktion für die Timeline. Hier sollte in der Zeitachse gezoommt werden können, also ein bestimmer zeitlicher Ausschnitt sollte gewählt werden können. Eventuell ist ein Zooming in der anderen Achse (was auch immer diese kann) auch sinnvoll. Wenn gezoomt wird, sollte ein Panning unterstützt und indiziert werden.
              <hr>
              <strong>Zoom & Pan Reset: </strong> Funktion zur Rückkehr zur Ausgangposition/ -einstellung.
              <hr>
              <strong>Filter: </strong> Nutzer sollten die Artefakttypen filtern können.
            </td>
          </tr>

          <tr>
            <td>Element: Card</td>
            <td>
              Zu jedem Artefakt der Timeline kann eine Card (oder Ähnliches) aufgerufen werden, auf der die wesentlichen Informationen zum Artefakt dargestellt werden. Von hier aus kann dann zur Detailseite (die nicht Gegenstand des Screendesign Projekts ist) gesprungen werden.
              <hr>
              <strong>Sammeln/ Merken:</strong> Der Besucher soll die Möglichkeit haben sich interessante Artefakte zu merken.
            </td>
          </tr>

          <tr>
            <td>Hilfe</td>
            <td>
              Dem Besucher soll irgendeine Art von Hilfe angeboten werden.
            </td>
          </tr>
          <tr>
            <td>Sprachwahl</td>
            <td>
              Der Besucher muss zwischen deutsch und englisch wechseln können.
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="content is-medium has-seperator">
      <h2>Kommunikationsziele/ Leitplanken</h2>
      <p>Das Cranach Digital Archive ist professionell, klar, möglichst einfach, reduziert, akzentuiert und zeitlos. Einige Gestaltungslemente sind bereits definiert. Alle Schriftgrößen und Abstände folgen der <a href="https://en.wikipedia.org/wiki/Renard_series">Renard 10 Serie</a>. Das Farbschema kann auch invertiert werden, sprich: weiße Schrift auf weißem Grund.
    </p>
    <iframe style="border: none;" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FedZxrUWHFScWr3jQhmGAxy%2FBase-v2-Copy%3Fnode-id%3D0%253A1" allowfullscreen></iframe>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="content has-seperator">
      <h2>Marktbeispiele</h2>
      <p>
        Da Sie sich hier mit einem potentiell neuen Umfeld befassen müssen, sind folglich einige bestehende Webseiten als Beispiele aufgelistet. Hier können Sie ggf. Inspirationen für Ihr Konzept gewinnen. Und noch ein Hinweis: Man muss nicht immer das Rad neu erfinden!
      </p>

      <ul>
        <li>
          <a href="http://lucascranach.org/">Cranach Digital Archive</a>
        </li>

        <li>
          <a href="https://www.timemachine.eu/">Time Machine EU</a>
        </li>

        <li>
          <a href="https://wege-zu-cranach.de/index.html">Wege zu Cranach</a>
        </li>

        <li>
          <a href="http://rembrandtdatabase.org/">Rembrandt Database</a>
        </li>

        <li>
          <a href="https://www.rct.uk/collection/search#/page/1">Royal Collection Trust London</a>
        </li>

        <li>
          <a href="https://www.metmuseum.org/">Metropolitan Museum of Art</a>
        </li>

        <li>
          <a href="https://histography.io/">Histography</a>
        </li>

        <li>
          <a href="http://cranach.ub.uni-heidelberg.de/wiki/index.php/Hauptseite">Cranach.net</a>
        </li>

        <li>
          <a href="https://www.dhm.de/lemo/">LeMO</a>
        </li>

        <li>
          <a href="https://www.wdl.org/en/">World Digital Library</a>
        </li>

        <li>
          <a href="https://timeline.knightlab.com/">Timeline.js</a>
        </li>

        <li>
          <a href="https://www.timescape.io/login">Timescape</a>
        </li>

        <li><a href="https://www.annefrank.org/en/anne-frank/the-timeline/">Anne Frank</a></li>
        <li><a href="https://www.gramercyparkhotel.com/hotel/history">Gramercy Park Hotel</a></li>
        <li><a href="https://www.invaluable.com/blog/art-history-timeline/">Invaluable</a></li>
        <li><a href="http://www.loisjeans.com/web2012/es">Lois Jeans</a></li>
        <li><a href="https://delhi-timeline.in/">Delhi Timeline</a></li>
        <li><a href="http://www.timelineindex.com/content/select/729/1023,729">Timeline Index</a></li>
        <li><a href="https://blazepress.com/2014/08/top-5-medical-discoveries-ever/">Blazepress</a></li>
        <li><a href="https://www.timetoast.com/timelines/the-most-famous-painters-in-history">Timetoast</a></li>
        <li><a href="http://www.unionhistory.info/timeline/timeline.php">Union History</a></li>

      </ul>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="content">

      <h2>Deliverables & Projektteam</h2>
      <p>
        Im Rahmen des Screendesign Projekts müssen folgende Deliverables via Übergabepunkt abgegeben werden: Designkonzept als Mockup, Patternlab und Online Dokumentation. Weitere Informationen dazu, auch zur Bewertung, finden Sie unter <a href="/mi-bachelor-screendesign/niveaustufen/">Niveaustufen und Deliverables</a>. Die Arbeit erfolgt in 2er Teams.
      </p>

      <h2>Prüfung zur Projektarbeit</h2>
      <p>
        Die Prüfung findet in Form einer <del>Projektpräsentation</del>[Video-Projektpräsentationsprüfung](video-projektpraesentationspruefung) statt. Dabei präsentieren die Teams ihr Projekt in 20
        Minuten. In der Vorstellung sollten Sie möglichst umfassend und professionell erläutern, wie Sie im Projekt
        vorgegangen sind und warum welche Entscheidungen getroffen wurden. Zur Prüfung müssen Sie sich im
        PSSO anmelden <strong>und</strong> einen Termin im Ilias buchen. Die Bewertung erfolgt mit Hilfe der <a
          href="/mi-bachelor-screendesign/niveaustufen/">Niveaustufen</a>.
        Dies sollten Sie sich unbedingt zur Projektlaufzeit und vor der Prüfung anschauen, um zu wissen, was erwartet
        wird und ihre Arbeit entsprechend auszurichten. Eine Übersicht über alle prüfungsrelevanten Artefakte, deren
        Gewichtung und Bewertung finden Sie bei der
        <a href="/mi-bachelor-screendesign/niveaustufen/">Erläuterung des Niveaustufenmodells</a>. <del>Die Prüfungen finden
        in den Tagen vom 23.03.2020 bis 25.03.2020 statt.</del>
      </p>
    </div>
  </div>
</section>

<!--section class="section">
  <div class="container">
    <div class="content has-seperator">
    
      <h2 class="title">Ganztagesworkshop</h2>
      <h3 class="subtitle">28. November 2019, 9:00 - 16:00 Uhr</h3>
      <p>
        Am Ganztagesworkshop wird das Fundament für die spätere Projektarbeit gelegt. Hier wird die Projektaufgabe, sowie Gegenstand und Kontext des Vorhabens vorgestellt.
      </p>

      <table class="table">
        <thead>
          <tr>
            <th width="33%">Übungen</th>
            <th>Erläuterung</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Analyse der Inhalte des Cranach Digital Archives</td>
            <td>Welche wesentlichen Inhalte bieten die Bereiche <a href="http://lucascranach.org/gallery">Gemälde</a>,
              <a href="http://lucascranach.org/archival-documents">Archivalien</a> und <a href="http://lucascranach.org/publications">Literatur</a>? Welche Informationen können abgerufen werden und wie gehören diese zusammen? Zielsetzung ist es, ein Gespür für das Informationsangebot des CDA zu bekommen.
              <br><br>
              Wie sieht das Mengengerüst für die einzelnen Bereiche und Eigenschaften (Filter) aus?
            </td>
          </tr>
          <tr>
            <td>Recherche</td>
            <td>Welche vergleichbaren Lösungen gibt es in diesem Bereich? Hier kann der Scope relativ groß sein. Auch Applikationen die nur einen Aspekt adressieren können hier interessant sein. Ziel ist hierbei Inspirationen, Ideen und Best Practices zu sammeln und zu generieren. Welche der gefundenen Lösungen könnten für die Cranach Timeline hilfreich sein und warum?
            </td>
          </tr>
          <tr>
            <td>Content Inventory für Cards entwickeln</td>
            <td><a href="https://material.io/components/cards/">Cards</a> könnten ein wichtiges Element im Designkonzept für die Cranach Timeline werden. Welcher Content müsste auf einer Card abgebildet werden und wie ist dieser Content beschaffen?
            </td>
          </tr>
        </tbody>
      </table>

      <h3>Tagesplan</h3>

      <table class="table">

        <tbody>
          <tr>
            <th width="30%">9:00 Uhr</th>
            <td>
              Kick-Off im Raum 3.102 // Belbin Teamrollen Test
            </td>
          </tr>

          <tr>
            <th width="30%">ab 11:30 Uhr</th>
            <td>
              Freies Arbeiten der Teams in den Arbeitsräumen 0.501 und 0.502.
            </td>
          </tr>

          <tr>
            <th width="30%">15:30 Uhr</th>
            <td>
              Präsentation der Ergebnisse und Fragen im Raum 0.501
            </td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>
</section>

<section class="section">
  <div class="container ">
    <div class="content">
      <h2>Teamrollen nach Belbin</h2>
      <p>von <a href="https://www.belbin.de/teamrollen/">https://www.belbin.de/teamrollen/</a></p>
      <h3>Leiter / Koordinator (L, K)</h3>
      <dl>
        <dt>Teamrollenbeitrag</dt>
        <dd>Reif, zuversichtlich, erkennt Talente.​ Erklärt Ziele. Delegiert wirksam.​
        </dd>
        <dt>zulässige Schwächen</dt>
        <dd>Kann als manipulierend wahrge- nommen werden. Will Arbeit loswerden.​</dd>

      </dl>

      <h3>Macher (M)</h3>
      <dl>
        <dt>Teamrollenbeitrag</dt>
        <dd>Herausfordernd, dynamisch, macht Druck. Hat den Antrieb und Mut, Hindernisse zu überwinden.</dd>
        <dt>zulässige Schwächen</dt>
        <dd>Neigt zu Provokationen. Läuft Gefahr, Gefühle zu verletzen.</dd>

      </dl>

      <h3>Erfinder / Neuerer (E, N)</h3>
      <dl>
        <dt>Teamrollenbeitrag</dt>
        <dd>Kreativ, phantasievoll. Generiert Ideen und löst schwierige Probleme.​</dd>
        <dt>zulässige Schwächen</dt>
        <dd>Ignoriert Nebensächlichkeiten. Zu​ gedankenverloren, um effektiv zu kommunizieren.​
        </dd>

      </dl>
      <h3>Beobachter (B)</h3>
      <dl>
        <dt>Teamrollenbeitrag</dt>
        <dd>Meint es ernst. Strategisch und urteilsfähig. Sieht alle Möglichkeiten. Urteilt genau.</dd>
        <dt>zulässige Schwächen</dt>
        <dd>Kann ein Mangel an Antrieb haben, andere zu inspirieren. Kann zu kritisierend sein.</dd>
      </dl>
      <h3>Umsetzer (U)</h3>
      <dl>
        <dt>Teamrollenbeitrag</dt>
        <dd>Praktisch, zuverlässig, effizient. Setzt Ideen in Aktionen um und organisiert die Arbeit, die getan werden muss.
        </dd>
        <dt>zulässige Schwächen</dt>
        <dd>Etwas inflexibel. Langsam in der Reaktion auf neue Möglichkeiten.</dd>
      </dl>
      <h3>Wegbereiter / Wechensteller (W)</h3>
      <dl>
        <dt>Teamrollenbeitrag</dt>
        <dd>Enthusiastisch, kommunikativ und nach außen orientiert. Erforscht Möglichkeiten und entwickelt​ Kontakte.​
        </dd>
        <dt>zulässige Schwächen</dt>
        <dd>Zu optimistisch. Kann Interesse ver- lieren, wenn die Anfangsbegeisterung​ abgeflacht ist.​</dd>
      </dl>

      <h3>Teamarbeiter (T)</h3>
      <dl>
        <dt>Teamrollenbeitrag</dt>
        <dd>Umgänglich, freundlich, einsichtig, zuvorkommend und diplomatisch. Hört zu. Baut Reibungsverluste ab.
        </dd>
        <dt>zulässige Schwächen</dt>
        <dd>Unentschlossen bei Zerreißproben. Vermeidet Konfrontationen.
        </dd>

      </dl>
      <h3>Perfektionist (P)</h3>
      <dl>
        <dt>Teamrollenbeitrag</dt>
        <dd>Zuverlässig, gewissenhaft, ängstlich. Deckt Fehler und Unterlassungen auf. Liefert pünktlich.​
        </dd>
        <dt>zulässige Schwächen</dt>
        <dd>Übermäßig besorgt. Delegiert ungerne.</dd>

      </dl>

    </div>
  </div>
</section-->