3. Aufgabe (Vortragspräsentation, ARIA)

Es soll das Grundgerüst einer HTML5-Seite erstellt werden, die (unter ARIA-Gesichtspunkten) für eine Vortragspräsentation geeignet ist.

Auch ist eine stete Erweiterung und Verbesserung der Homepage möglich, indem z.B. eine Info-Seite erstellt wird, die das Vorgehen und den Möglichkeiten mit der Präsentationsseite beschreibt oder die das einführende Beispiel (siehe hier unten den optionalen Hinweis) testet. Alle Seiten sind zu validieren (HTML5).

Auch kann ein interaktive Multiple-Choice-Seite (Self-Assessment) erstellt werden, die eigene HTML-CSS-ECMAScript-Erfahrungen berücksichtigt. Hier ist unser MCT-Erstellungstoolchen

Wie fange ich mit der Entwicklung an?

Für die Entwicklung eines wiederverwendbaren Präsetationsrahmens kann zunächst mit globalen ECMAScript-Funktionen gearbeiten werden.

Zunächst soll die HTML5-Seite mehrere Formulare (form-tag) enthalten.
Das erste Formular der Auswahl der Vortragspunkte benutzt werden (menu-Formular).
Der Inhalt jedes weitere Formulares soll dem jeweiligen Vortragspunkt repräsentieren.
Nach dem Laden der Seite soll (im HTML-Header) mit
```
window.onlod = function () {
   // alle Formulare unsichtbar schalten werden
}
```
die Startansicht der Präsentation gemacht werden. Natürlich werden alle ECMAScript-Teile der HTML-Seite gerahmt mit
```
<script>
  ...
</script>
```
Für nicht sehbehinderte ist ein ästetisches Design (Style entwickeln) verpflichtend.
Der Quelltext von http://www.cilie.org/mmk/index.htm kann, falls er verstanden wird, recht hilfreich sein.

Hier eine optionale Hinweis

Die folgende Funktion zeige(id, show) verwendet Tag-Identifizierer (id="myid") und dient lediglich dem Verständnis.

Der Funktions-Aufruf-Parameter id ist ein String, der das Ziel-Tag identifiziert (z.B. id='myid')
Es gebe ein Tag mit id="myid". Ein Aufruf zeige(id) ohne show-Parameter soll die Sichtbarkeit und Nicht-Sichtbarkeit tauschen. Wird kein Funktions-Aufruf-Parameter show übergeben, so wird der aktuelle Zustand der Sichtbarkeit abgefragt und die entgegengesetzte Sichtbarkeit ausgelöst (zeige).
Ein vorhandener Funktions-Aufruf-Parameter show kann 'none' oder 'block' sein. Durch 'none' wird das Ziel-Tag umsichtbar. Durch 'block' wird das Ziel-Tag sichtbar.

Wie sieht eine solche ECMAScript-Funktion aus? Die ECMAScript Funktion zeige(id, show) wird im <script> ... </script> - Bereich einer Seite definiert, etwa

<script>
function zeige(id, show) {
  var obj = window.document.getElementById(id),
    s = obj.style.display;
    if (!show) {
      if(s==='' || s==='block') {show='none';} else {show='block';}
    } obj.style.display = show;
  }
}
</script>

Wie sieht ein a-Tag aus, das die globale Funktion zeige('myid') testweise aufruft?

Wie kann diese Funktion in ein mmk-Objekt eingebaut werden so, daß die folgenden Aufrufe möglich sind?

<a onclick="mmk.zeige('myid','block')" href="javascript:void(0)">show<>
<a onclick="mmk.zeige('myid','none')" href="javascript:void(0)">hide<>