FI-25Wi-FIA-2E (🚧)

VonOliver Mezger Aktualisiert am

1 Web-Frontend für IGeL-Leistungen 33P

Ich bin mit der Code-Vorgabe nicht einverstanden, heute ist HTML5, zu viel div.
Bei 1.1 Aufgabenstellung wurde Hoch- mit Querformat verwechselt?
Statt IDs würde ich Klassen verwenden, es gibt ID row und eine Klasse row, ist für mich kein guter Stil.
Die Aufgabe ist für mich nicht völlig seltsam, aber sie fühlt sich komisch an. Würde ich als Profi überhaupt in die Problematik dieser Aufgabe geraten?

Vorgabe HTML
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <h3>Unsere Zusatzleistungen</h3>
        <div id="row">
            <div id="text">
                Unsere Praxis bietet Ihnen neben der professionellen Zahnreinigung auch weitere Zusatzleistungen an, um
                Ihre Zahngesundheit zu verbessern und zu erhalten. Dazu gehören unter anderem die Zahnaufhellung, die
                Fissurenversiegelung und die Parodontitisbehandlung. Unsere erfahrenen Zahnärzte beraten Sie gerne,
                welche Zusatzleistungen für Sie sinnvoll sind und wie sie Ihre Zahngesundheit unterstützen können.
            </div>
            <div id="check">
                <input type="checkbox" id="pzr" name="pzr" value="PZR">
                <label for="pzr">Ich möchte eine Professionelle
                    Zahnreinigung!</label>
            </div>
            <div id="cost">
                Kosten der Professionellen Zahnreinigung:
            </div>
        </div>
        <button id="termin" name="termin" class="termin" disabled>Termin
</body>

</html>
1.1 & 1.2 CSS-Lösung 8+5P
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #dae1eb;
  font-weight: normal;
  font-size: 16px;
}
#row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: lightblue;
}
#row > div {
  padding: 1rem;
  border: 1px solid black;
}
#text {
  grid-column: 1/3;
}
@media (orientation: landscape) {
  #row {
    grid-template-columns: 2fr 1fr 1fr;
    background-color: aqua;
  }
  #text {
    grid-column: 1/2;
  }
}
@media (max-width: 500px) {
  #row {
    font-size: 1.1rem;
  }
}
@media (min-width: 700px) {
  #row {
    font-size: 0.9rem;
  }
}
1.1 & 1.2 CSS-Schülerlösung
body {
  background: #dae1eb;
  font-weight: normal;
  font-size: 16px;
}

#row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 5px;
}

#text {
  grid-column: 1;
  border: solid 1px black;
  padding: 10px;
}

#check {
  grid-column: 2;
  border: solid 1px black;
  padding: 10px;
}

#cost {
  grid-column: 3;
  border: solid 1px black;
  padding: 10px;
}

@media (orientation: portrait) {
  #row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
  }

  #text {
    grid-column: 1 / span 2;
    grid-row: 1;
    border: solid 1px black;
    padding: 10px;
  }

  #check {
    grid-column: 1;
    grid-row: 2;
    border: solid 1px black;
    padding: 10px;
  }

  #cost {
    grid-column: 2;
    grid-row: 2;
    border: solid 1px black;
    padding: 10px;
  }
}
1.3 Button anklickbar machen 4P
<script>
  const checkbox = document.getElementById('pzr');
  const button = document.getElementById('termin');
  checkbox.addEventListener('change', function () {
    button.disabled = !checkbox.checked;
  });
</script>

1.4.1 Weitere Architektur-APIs und Unterschiede zu REST-API 4P

SOAP: XML-Basiert, älter, komplizierter.
WebSockets: Dauerhafte Verbindung, also Zustandsbasiert, (Nicht REST-Konform)
GraphQL: JSON-Basiert, ist aber REST-Konform..
MQTT: MQTT ist nicht REST-konform. REST ist ein Architekturstil mit klaren Prinzipien wie zustandslosen Request/Response-Interaktionen über Ressourcen, während MQTT ein Publish/Subscribe-Protokoll mit Broker und dauerhaftem Verbindungsmodell ist.

1.4.2 JSON-Struktur 8P

{
    "leistung": "2mal Jährlich",
    "Termine":[
       {"Termin":"12.12.2026"},
       {"Termin": "11:12.2026"}
    ],
    "Kontaktdaten":{
        "Name":"Max",
        "Anschrift": "Irgendwo",
        "Mail": "mail@test.de",
        "Telefon" :"1231315" 
    }
}

1.4.3 Bootstrap Probleme 4P

  • Framework wird aus anderer Quelle geladen, Hinweis im Datenschutzteil ggfs. notwendig.
  • Änderungen des Frameworks liegt ausserhalb der eigenen Zuständigkeit.
  • Eine bestimmte Version wird verwendet, kann ggfs. nicht mehr verfügbar sein.
  • ¿Der Integrity-Check und die Cross-Origin-Anweisung fehlen?

2 Automatisierung von Praxis-Funktionen mittels IoT und MQTT 32P

2.1 Lokales Netz vs. Cloud 3P

  • Datenschutz, Daten bleiben im eigenen Netz
  • Höhere Ausfallsicherheit, unabhängig vom Internet.
  • Konkursresistent, geht auch noch wenn Cloud-Betreiber Dienst einstellt.

2.2 Arten von Sensoren 6P

  • Lichtsteuerung: Anwesenheitssensor (Bewegungssensor 📖 PIR oder Ultraschall oder Radar), Helligkeitssensor, Relais.
  • Jalousiensteuerung: 📖 Windgeschwindigkeitssensor, Motor für Jalousie.
  • Temperatursteuerung: Raumthermometer, Wärmesensoren, Aktor zur Steuerung der Wärmeabgabe im jeweiligen Raum, z.B. Durchflussregler für Wasser

2.3 MQTT-Geräte-Aufgaben 6P

  • MQTT-Publisher: Sendet Nachrichten an Broker.
  • MQTT-Subscriber: Abonniert Topics vom Broker, die er dann erhält.
  • MQTT-Broker: Empfängt die Publish-Nachrichten und sendet an alle Clients, die sich für das Topic interessieren.

2.4 MQTT-Topics-Aufgaben beschreiben 3P

Z.B. ersterStock/Wartezimmer2/FensterOstOffen. Topic beschreibt Aufgabe aber auch Hierarchie des Sensors.

2.5 JSON-Packet für Windgeschwindigkeit 6P

{
  "id": "msg-20260424-0001",
  "createAt": "2026-04-24T14:02:00+02:00",
  "topic": "behandlungsraum2/west/fenster1/windgeschwindigkeit",
  "qos": 0,
  "payload": "42.99"
}

2.6.1 Kriterien einer sicheren Verbindung 2P

Authentizität, Integrität, Vertraulichkeit.

2.6.2 Verbindungssicherung zwischen Broker und Client

  • TLS: Zertifikate Authentifizierung des Servers und Verschlüsselung (geheimer Transport der Information).
  • Benutzername/Passwort: Klassische Anmeldung an einen Server.
  • Zertifikatsbasierte Authentifizierung: PKI 📖 Public-Key-Infrastruktur.
  • FIDO2? macht das 📖 FIDO2 hier Sinn?
Seitenaufrufe: 203