Skip to content

Latest commit

 

History

History
64 lines (49 loc) · 3.21 KB

explanation.md

File metadata and controls

64 lines (49 loc) · 3.21 KB

Digitale Medien - Ameisenalgorithmus

Name: Philipp Ucke

Mat. Nr.: 221867

HTML

Wie habe ich das HTML erstellt?

Um das HTML zu erstellen, habe ich mir das JavaScript Framework React angeschaut. Dieses Framework arbeitet mit JSX, eine Syntax Erweiterung für JavaScript. React ist in der Lage dieses JSX zu verarbeiten und in HTML zu übersetzen.

Womit habe ich es bearbeitet?

Ich habe für das Erstellen der Dateien Webstorm verwendet. Der Umgang mit dieser IDE war mir bereits bekannt. Ein einfacher Texteditor hätte allerdings auch gereicht.

Warum habe ich mich für React entschieden?

  1. Einfachheit - Grundkenntnisse in HTML, CSS und JavaScript reichen aus
  2. Community - React ist weit verbreitet und hat eine große Community, die bei Problemen helfen kann
  3. Geschwindigkeit - mittels React lassen sich Webseiten schnell erstellen

CSS

Wie habe ich das CSS erstellt? Womit habe ich es bearbeitet?

Um das CSS zu erstellen, habe ich TailwindCSS verwendet. Dies ist ein CSS Framework, welches das Stylen der Elemente direkt im JSX ermöglicht. Dabei werden Eigenschaften in TailwindCSS in die Klassennamen der Elemente geschrieben. Ein Post-Processing erzeugt dann die fertigen CSS Dateien. Webstorm war die IDE meiner Wahl.

Warum habe ich mich für TailwindCSS entschieden?

  1. Individuell - TailwindCSS schreibt einem nicht vor, wie einzelne Elemente auszusehen haben
  2. Geschwindigkeit - durch das Post-Processing ist es nicht notwendig CSS Dateien händisch zu erstellen
  3. Responsiv - TailwindCSS ist von Haus aus responsiv und für mobile Geräte optimiert

Text

Wie habe ich den Text erstellt? Womit habe ich es bearbeitet?

Den Text habe ich lediglich in den Code geschrieben (gehardcodet). Das Styling und die Formatierung übernimmt das CSS. Bearbeitet habe ich den Text in der IDE Webstorm.

Warum habe ich mich für den Text entschieden?

Der Text liefert die Grundlage der Internetseite und ist der Haupt-Content. Dadurch ließ sich das Thema strukturiert, sauber und unkompliziert darstellen.

Animation

Wie habe ich die Animation erstellt? Womit habe ich es bearbeitet?

Ich verwende auf der Internetseite einen Floating-Button. Dieser ist ganz am Anfang auf der Startseite zu sehen. Das langsame Auf-und-Ab-Hüpfen spiegelt die Animation wider. Dieser Effekt wird mittels CSS erzeugt. Als Entwicklungsumgebung habe ich Webstorm verwendet.

Warum habe ich mich für die Animation entschieden?

Die Animation belebt die obere Section der Startseite und liefert Hinweise, dass es unten noch mehr Informationen gibt.

Bilder

Wie habe ich die Bilder erstellt?

Das Bild mit der Ameise auf dem Hügel am Anfang habe ich mittels Figma erstellt. Das zweite Bild (Der Graph) wurde mittels React Force Grapgh umgesetzt. Der interaktive Graph (als Link hinter dem Bild) wurde ebenfalls damit erstellt. Das bewegte Bild (Gif) am Ende wurde von mir auf dem iPad mit Goodnotes animiert.