Gestaltung und Technik, Schwerpunkt Digital

Bewertung: 
0
Bisher keine Bewertung

U10: CSS3-Animation

Animationen auf Webseiten können seit der Veröffentlichung der CSS3 (Cascading Style Sheets Version 3) direkt mittels CSS definiert werden.

Umwege/Situation vor CSS3 Animationen

Vorher war es Web-Entwicklern nur über Umwege möglich Animationen auf Webseiten zu implementieren. Solche Umwege waren zum Beispiel

  • der Einsatz von Flash Animationen (von Adobe 2021 eingestellt und ab sofort in allen Browsern blockiert)
  • Scripte um einzelne Elemente auf den Webseiten zu manipulieren sodass diese Veränderungen zeitliche Animationen entstehen ließen, beispielsweise Script-Sprachen wie JavaScript
  • das Einbinden von Medieninhalten, die Animationen abbilden können, dies umfasst zum Beispiel GIF (Graphics Interchange Format) oder APNG (Animated Portable Network Graphics)

 

CSS3 Animationen

Animationen in CSS betreffen, wie auch die über CSS festgelegten Styles, immer ein spezifisch ausgewähltes (selektiertes) Element des HTML-DOMs.

Dabei definierst du die Animation getrennt von dem Element, welches du animieren möchtest. Dies macht es möglich, die gleiche Animation gleich auf mehrere Elemente anwenden zu können.

Die Arbeit mit CSS-Animationen gliedert sich demzufolge also in die folgenden zwei grundlegenden Bestandteile:

  1. Die Definition der CSS3 Animation
  2. Die Zuweisung der vorher definierten CSS3 Animation

 

Definition der Animation

Normale CSS Styles beschreiben das Aussehen eines beliebig selektierten HTML-Elementes immer "fix und statisch", also das Aussehen verändert sich nicht auf zeitlicher Ebene.

Die Webseite wird geladen, der Browser liest die CSS-Styles und wendet diese optisch auf die entsprechenden Elemente an, das wars.

Eine weitere Veränderung des Aussehens der Elemente erfolgt nicht (zumindest nicht durch CSS, mit JavaScript oder ähnlichen Script-Sprachen ist auch dies möglich.)

Damit aber nun genau das doch möglich ist durch CSS, lassen sich solche zeitlichen Abfolgen von Veränderungen des Aussehens der HTML-Elemente durch die besagten CSS Animationen erstellen.

Hierbei handelt es sich um übliche Style-Zuweisung, welche nun jedoch nicht einen fixen Zustand eines Elementes beschreiben, sondern eben mehrere Zustände.

Ein einzelner Zustand ist hierbei ein sogenannter Keyframe. Animationen entstehen nun, wenn mehrere dieser Keyframes definiert werden, durch die unterschiedlichen Styles, die jeweils im entsprechenden Keyframe festgelegt sind.

Wie auch bei CSS Media Queries gibt es hierzu in CSS eine sogenannte AT-Rule (at da mit dem @-Zeichen beginnende Deklaration), diese seiht so aus: 

@keyframes

Um nun eine vollständige Animation mit mehreren Keyframes aufzubauen muss zunächst einmal der Name der Animation festgelegt werden, dieser folgt der @-Regel und nach dem Namen schließen sich entsprechend die CSS üblichen geschweiften Klammer an, welche alle weiteren animationsspezifischen Deklarationen umschließen werden.

@keyframes example { … }

Die oben definierte CSS-Animation trägt den Namen example und kann entsprechend über diesen auch später referenziert werden.

Namensgebung von Animationsnamen

Zur Benennung deiner Animation solltest du am besten standardisiert vorgehen, so versteht jeder Entwickler intuitiv worum es geht und kann mit deinem Code etwas anfangen.

Weit verbreitet sind hierbei die folgenden Regeln:

  • englischsprachige Bezeichnungen
  • alles in Kleinbuchstaben
  • Zur Trennung logischer Bestandteile des Namens Bindestriche verwenden (da wo du sonst zum Beispiel Leerzeichen setzen würdest)

 

Generell ist bei den Namen rein technisch folgendes zu beachten:

A name identifying the animation. This identifier is composed of a combination of case-sensitive letters a to z, numbers 0 to 9, underscores (_), and/or dashes (-). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can't be none, unset, initial, or inherit.

Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name

 

Nach der Namensgebung schließen sich nun die einzelnen Styles der verschiedenen Zustände/Keyframes der Animation an, diese werden alle innerhalb der geschweiften Klammern geschrieben.

Das besondere nun ist, dass sich die Styles ja in mehre Zustände gliedern, daher schreibst du dort hin, wo du sonst den Selektor einer CSS-Regel schreiben würdest, stattdessen eine zeitliche Festlegung.

Diese bestimmt dann, wann der Zustand der Animation ausgelöst wird.

Konkret hasst du hier verschiedene Optionen die Zeitpunkte zu markieren:

  • über die Keywords from und to
    • from beschreibt den Zustand beim Start der Animation
    • to hingegen den Zustand am Ende der Animation
  • über %-Angaben
    • hierbei ist eine unbegrenzte Anzahl an Zwischenstopps/Keyframes möglich

 

Beispiel von w3schools.com der from/to-Zuweisung

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

Bei der oben stehenden Animation ist beim Start der Animation der Hintergrund des gewählten Elementes Rot und bei Ende ist dieser entsprechend Gelb.

Bei der Nutzung von Prozent-Angaben kann es zum Beispiel wie folgt aussehen (w3schools.com):

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

Zuweisung der Animation

Nachdem die Animation nun definiert ist, kannst du diese einem beliebig selektierten HTML-Element mittels den entsprechenden CSS Deklarationen zuweisen.

Hierfür gibt es eine ganze Reihe an CSS Eigenschaften (Properties),  die du hierbei deklarieren kannst.

Die folgenden Eigenschaften sind zuweisbar:

  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function

 

Erforderlich sind zunächst einmal der Name der Animation, in unserem Fall example sowie eine Zeitangabe, wie lange die Animation dauern soll.

Diese Eigenschaften sind beide in dem Selektor-Block des Elementes unterzubringen, welche die Animation erhalten soll, hier z. B. jeder div auf der Webseite.

div {
  animation-name: example;
  animation-duration: 2s;
}

Den Namen legst du durch folgende Eigenschaft fest:

animation-name: example;

Die Zeitangabe/Dauer der Animation dann entsprechend über:

animation-duration: 2s;

Hier hast du zunächst deinen Animationsnamen und anschließend eine bestimmte Zeitdauer, hier 2 Sekunden, angegeben, diese Angaben reichen bereits aus, dass deine Animation dem Element zugeordnet ist, und dieses somit animiert, so wie du es in der Abfolge der Keyframes deiner Animation festgelegt hast.

 

Weiterführende Inhalte

Die Details kannst du nochmals über folgende Links nachvollziehen, hier erhäst du zusätzlich ncoh weitere Einblicke in die Theamtik Animationen mittels CSS3:

 

Bewertung: 
5
Durchschnitt: 5 (2 Stimmen)

 

U11: PHP-Formularauswertung

HTML-Formulare können ein HTTP-Request unter der im method-Attribut des Formulars festgelegten Methode erzeugen. Dies kann zum Beispiel ein GET-Request oder ein POST-Request sein. Der Endpunkt des Request wird über das action-Attribut des Formulars bestimmt und gibt an wohin der Request gesendet wird.

Ablauf

Nehmen wir beispielsweise ein Projektverzeichnis mit folgender HTML-Datei an.

<form method=post action=form.php>
    <input type=email name=email>
    <input type=submit value=Senden>
</form>

Bei der Absendung werden die Inhalte des Formulars, hier die Texteingabe der E-Mail, als HTTP-POST-Request an die festgelegte Datei form.php übermittelt.

<?php
if (
    $_SERVER['REQUEST_METHOD'] === 'POST' &&
    isset($_POST['email'])
) {
    // …
} else {
    die('Ungültige Anfrage');
}

Die PHP-Datei wird aufgerufen und ausgeführt, hierbei wird zunächst überprüft, ob es sich tatsächlich um eine POST-Anfrage handelt und ob das Feld der E-Mail überhaupt in dem Anfrage-Körper enthalten ist. Ist das der Fall, kann das Script fortgesetzt werden, ist das hingegen nicht der Fall und mindestens eine der beiden Konditionen ist nicht wahr, so wird die Ausführung des Scripts sofort beendet und eine entsprechende Meldung wird als Antwort zurückgesendet.

Validierung

Sind die richtigen Inhalte mit der richtigen Übertragungsmethode eingegangen müssen aus Sicherheitsgründegen unbedingt auch die Inhalte der übertragenen Werte validiert werden.

Hierbei geht es darum zu prüfen, ob ein übertragenes Feld auch tatsächlich den Vorgaben seines Inhaltes entspricht. Das heißt, dass geprüft werden muss, ob ein Feld, dessen Inhalt eine Zahl sein soll, auch tatsächlich eine Zahl ist oder ob ein Eingabefeld für eine E-Mail-Adresse auch tatsächlich eine E-Mail-Adresse beinhaltet.

PHP bietet für diesen Zweck eine Reihe von Funktionen, die genau das tun: https://www.php.net/manual/en/ref.filter.php

$email = filter_input(
    INPUT_POST,
    'email',
    FILTER_VALIDATE_EMAIL
);

if ($email === false) {
    die('Ungültige E-Mail-Angabe');
}

Sanitization

Sind alle Werte geprüft und haben sich als valide herausgestellt müssen die Inhalte nun noch der sogenannten Sanitization unterzogen werden, um die Werte auch gefahrlos in der Weiterverarbeitung darstellen zu können. Hierbei werden alle potenziell gefährlichen Inhalte in den Werten entfernt oder so umgewandelt, dass diese bedenkenlos ausgegeben werden können. Das ist wichtig, da sichergestellt werden muss, dass zum Beispiel von Außen kein Fremdcode eingeschleust werden kann.

$email_sanitized = filter_var(
    $email,
    FILTER_SANITIZE_EMAIL
);

echo <<<HTML
    Deine E-Mail ist $email_sanitized
HTML;
Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

 

Formularverarbeitung mit PHP

Ganz simpel!

Auf der HTML-Seite hat man irgendein Formular.

    <form method="POST" action="formularverarbeitung.php" >
   
        <input type="text" name="betreff">
       
        <textarea name="kommentar"></textarea>
       
        <input type="submit" value="Speichern">
   
    </form>

Welche Art von Feldern in dem Formular stehen, ist egal. Was man braucht ist der "name". In der PHP-Datei, an die es geschickt wird, kann man den Inhalt nämlich unter diesem Namen abrufen und in Variablen speichern.

    <?php
   
        $betreff = $_POST['betreff'];
       
        $kommentar = $_POST['kommentar'];
   
    ?>

Wenn das Formular mit method="GET" funktioniert, dann muss da anstelle $_POST['...'] allerdings $_GET['...'] stehen. Man kann auch einfach $_REQUEST['...'] schreiben, denn das geht für beide.

Nachfolgend kann man mit den Variablen anstellen, wonach einem der Sinn steht... In eine Datei schreiben, in die Datenbank schreiben oder auch einfach nur ausgeben.

    <div class="beitragstitel">
    
        <h2><?php echo $betreff; ?></h2>
    
    </div>
    
    
    <div class="beitrag">
    
        <?php echo $kommentar; ?>
    
    </div>

 

Nicht schlecht, aber für Newbies ein bisschen viel auf einmal ;)
Tutorial auf Quakenet: http://tut.php-q.net/de/post.html

Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

U12: Video-Einstellungsgrößen

Anleitung für das Wiki
In diesem Wiki könnt ihr gemeinsam Lerninhalte erstellen. Jedes Wiki ist direkt und für jeden angemeldeten User editierbar. Wenn bereits bei vorherigen Prüfungen Wikis zum Thema (manchmal auch nur Teilgebiete streifend) erstellt wurden, so werden sie unten verlinkt. Ansonsten einfach hier diesen Eintrag überschreiben und mit entsprechenden Inhalten füllen.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.
Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung