Name: Philipp Ucke
Mat. Nr.: 221867
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.
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.
- Einfachheit - Grundkenntnisse in HTML, CSS und JavaScript reichen aus
- Community - React ist weit verbreitet und hat eine große Community, die bei Problemen helfen kann
- Geschwindigkeit - mittels React lassen sich Webseiten schnell erstellen
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.
- Individuell - TailwindCSS schreibt einem nicht vor, wie einzelne Elemente auszusehen haben
- Geschwindigkeit - durch das Post-Processing ist es nicht notwendig CSS Dateien händisch zu erstellen
- Responsiv - TailwindCSS ist von Haus aus responsiv und für mobile Geräte optimiert
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.
Der Text liefert die Grundlage der Internetseite und ist der Haupt-Content. Dadurch ließ sich das Thema strukturiert, sauber und unkompliziert darstellen.
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.
Die Animation belebt die obere Section der Startseite und liefert Hinweise, dass es unten noch mehr Informationen gibt.
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.