Das ist eher eine Aufgabe für HTML + JavaScript. Mit CSS kannst du nur das Aussehen von Seitenelementen beeinflussen.

Eine einfache Umsetzung könnte so aussehen:

<!doctype html>
<title>Example</title>
<button onclick="prompt('Dialog title', 'Field default value')" type="button">Click me</button>

Der klickbare Knopf wird mittels eines button-Elements umgesetzt. Dieses Element bekommt einen Event Handler zugeordnet, der bei Klick auf den Button aufgerufen wird. Der Handler ruft die prompt-Funktion auf, die einen Dialog mit Textfeld anzeigt.

(...) aber ich glaube das ist egal was man nutzt oder?

Es ist nur wichtig, einen Texteditor zu haben, mit dem man Text speichern kann.

...zur Antwort

Der Connectionstring gibt an, mit welcher Datenbank du dich verbindest. Wenn der Pfad, den du als DataSource angibst, relativ ist, geht er von dem Ordner aus, in dem sich dein auszuführendes Programm befindet. Builds wandern typischerweise in den bin-Ordner.

...zur Antwort

Mindestens der Text sollte in einen eigenen Container. Bei dem Bild würde ich allerdings ebenso einen Container drumherum setzen, um die Skalierung leichter handzuhaben.

Welche Elemente dabei konkret zum Einsatz kommen, hängt vom Kontext ab. Wenn der Text beispielsweise das Bild beschreibt und diese Einheit essentiell zum Hauptinhalt der Seite beiträgt, dann wäre ein figure-Element passend.

<figure class="container">
  <div class="container__image-box">
    <img alt="..." class="container__image" height="..." src="..." width="...">
  </div>
  <figcaption class="container__text">Some text</figcaption>
</figure>    

Die Elemente kannst du nun mittels Flexbox oder einem Grid horizontal nebeneinander anordnen.

CSS:

.container {
  column-gap: 10px;
  display: flex;
  margin: 0;
}

.container__text {
  flex: 1 1 0px;
  text-align: right;
}

.container__image {
  height: auto;
  width: 100%;
}

Zu beiden Features findest du hier ausführliche Guides:

  • A Complete Guide to Flexbox
  • A Complete Guide to CSS Grid
...zur Antwort

1) Du setzt mehrmals die Schriftart für Komponenten falsch.

// falsch
entry= tk.Entry(root, width= 20, font("Arial", 20), bd=20, justify= tk.RIGHT)

// richtig
entry= tk.Entry(root, width=20, font="Arial 20", bd=20, justify=tk.RIGHT)

// auch richtig
entry= tk.Entry(root, width=20, font=("Arial", 20), bd=20, justify=tk.RIGHT) 

Bei font handelt es sich um ein keyword argument. Dieses wird mittels Gleichheitszeichen von seinem Wert getrennt.

2) Hinter dem Kopf einer Kontrollstruktur kommt stets ein Doppelpunkt

// falsch
if column_val> 3

// richtig
if column_val > 3:

Es ist für eine bessere Lesbarkeit im Übrigen sinnvoll, Operatoren und Terme via Leerzeichen zu trennen.

3) Die Einrückungen in deiner vorletzten Schleife sind offensichtlich falsch. Wenn du einen neuen Kontext öffnen möchtest (z.B. if-Körper), dann rücke um vier Leerzeichen nach rechts ein. Soll dieser Kontext wieder geschlossen werden, geht es wieder vier Leerzeichen nach links.

4) Der Aufruf von mainloop sollte insgesamt nur einmal erfolgen. Er gehört also nicht in den Schleifenkörper.

5) Bei entry.grid handelt es sich um einen Methodenaufruf. Folglich ist der Zuweisungsoperator vor der Klammer (Argumentenliste) falsch.

6) Es gibt kein Argument stickx für die grid-Methode.

...zur Antwort

Versuche die unterschiedlichen Ebenen (Styles, Markup, Skripte) so gut wie möglich zu trennen. Bei JavaScript und CSS dürfte das am einfachsten fallen, da du beide Sprachen in eigene Dateien auslagern kannst.

Bezüglich PHP wäre es vorteilhaft, ein MVC-Framework mit Template-Engine zu nutzen (z.B. Laravel, Phalcon, Symfony, Yii, o.ä.), denn ein solches gibt schon gut durchdachte Strukturen vor.

Aber auch ohne Framework kann man sich erste Ansätze schaffen, eine stärkere Trennung vorzunehmen.

  • Entwickle, wo es geht, objektorientiert
  • Lagere deine Klassen und Funktionen in eigene Dateien aus und inkludiere sie nur in andere Dateien; Anwendungslogik hat in Views (HTML) nichts zu suchen
  • Lege dir eine klare Ordnerstruktur an (z.B. models, views, controllers, ...)
  • Bau dir ein Routingsystem (es gibt etliche Webartikel dazu)
  • Verzichte auf globale Variablen
  • Wenn du PHP und HTML vermischen musst, verwende die alternative Syntax, die PHP zur Verfügung stellt
  • Verzichte möglichst darauf, HTML in PHP-Strings zu verwenden; inkludiere stattdessen den PHP-Code in HTML, so wie hier:
<?php $name = "Josef"; ?>
<p>My name is <?= $name ?></p>
  • Lagere wiederverwendbare Komponenten (Bsp.: Footer) in eigene Dateien aus und binde sie wo benötigt nur noch ein

Ansonsten ist, wie dir hier bereits geschrieben wurde, eine IDE nützlich (z.B. PhpStorm oder Visual Studio), die dich mit Syntax Highlighting u.ä. unterstützen kann.

...zur Antwort
NextJS-Backend/Datenbank?

Ich habe eine Anwendung, wo sich ein Nutzer mit Auth0 registrieren kann.

Es zeigt den Namen und die E-Mail ganz normal an und mit

/api/auth/login
/api/auth/logout

kann man sich anmelden/abmelden.

Nun sollen alle Nutzer XP-Punkte haben (bei 0 starten) und durch Fragen beantworten im Level aufsteigen können. Bzw. ich möchte ganz simpel erst einmal mit einem Buttonklick 25 XP-Punkte dazu verdienen.

Das Ganze kriege ich normalerweise mit PHP und einer normalen SQL-Datenbank, die ich in phpMyAdmin einrichte, hin, aber da ich in NextJS neu bin, wollte ich wissen, wie das da abläuft.

Vercel liefert soweit ich weiß keine Datenbank, wo ich Nutzerdaten hinschicken kann und Auth0 kann auch nicht mehr, als nur ein sicheres Loginsystem bieten.
Also müsste ich die SQL-Datenbank wie immer anlegen und mit dem user-Objekt von Auth0 arbeiten und die "sid" benutzen, um die Punkte dem richtigen User zuzuschreiben?

Ich weiß, dass MongoDB beliebt ist, aber das ist doch auch wieder extern irgendwo und kostet Geld und ist nicht auf einem "Standard" Webhosting inklusive, wie PHP/SQL-Datenbank.

Wie benutzt man MongoDB und ist das sinnvoll?

Für Next brauche ich kein VPS, was praktisch ist. Keine zusätzlichen Kosten und lange Einrichtung. Dafür SSR.

NextJS ist auch selber das Backend soweit ich weiß, also ich kann direkt in der Serverkomponente eine Datenbankabfrage machen und mit Node etwas zu der Datenbank hinzufügen, wie das mit dem Klick +25 XP.

Von Firebase habe ich gehört, dass es beides kann: Sowohl sichere Authentication als auch Datenbank für Nutzerdaten.

Aber ob das bei wenigen Nutzern Geld kostet weiß ich nicht.

...zur Frage
(...) und Auth0 kann auch nicht mehr, als nur ein sicheres Loginsystem bieten.

In Auth0 können ebenso profilbezogene Daten (user_metadata) gespeichert werden.

Also müsste ich die SQL-Datenbank wie immer anlegen und (...)

Wenn du die Nutzerdaten in einer eigenen Datenbank ablegen möchtest: Ja. Eine Tabelle mit zwei Spalten dürfte ausreichen. Eine Spalte beinhaltet eine Nutzer-ID/E-Mail (= Primärschlüssel), die zweite die aktuellen Erfahrungspunkte.

Die sid von Auth0 wäre allerdings nicht als Nutzer-ID geeignet, denn die beschreibt die aktuelle Session-ID. Sie ist also nicht persistent, sondern ändert sich mit jeder neuen Authentifizierung. Nimm stattdessen die user_id oder (sofern die in deinem Fall eindeutig ist) die E-Mail-Adresse.

(...) Vercel liefert soweit ich weiß keine Datenbank, wo ich Nutzerdaten hinschicken kann (...)

Vercel bietet verschiedene Formen der Datenspeicherung. Das Angebot inkludiert eine Postgres-Datenbank, die du auch im Hobby-Plan nutzen kannst.

(...) aber da ich in NextJS neu bin, wollte ich wissen, wie das da abläuft.

Wie in PHP, kannst du auch mit unterschiedlichen DBMS kommunizieren. Schau auf NPM, dort findest du passende Client-Bibliotheken.

Zum Beispiel:

  • mongodb (MongoDB)
  • mysql2 (MySQL)
  • pg (Postgres)
  • prisma (ein ORM, welches Konnektoren zu verschiedenen DBMS bietet; bei Bedarf auch eine GUI zur Verwaltung der Datenbank > siehe Prisma Studio)
  • sqlite3 (SQLite)

Wenn du explizit phpMyAdmin weiterverwenden möchtest, musst du es entsprechend einrichten (Webserver mit PHP-Konfiguration, phpMyAdmin installieren und konfigurieren). In einer Webhosting-Umgebung, in der die entsprechenden Zugriffsrechte fehlen, klappt das natürlich nicht so gut. Du könntest dir das alles auf dem eigenen Rechner einrichten und später einen Dump auf das gehostete System ziehen.

Ich weiß, dass MongoDB beliebt ist, aber das ist doch auch wieder extern irgendwo und kostet Geld und ist nicht auf einem "Standard" Webhosting inklusive, wie PHP/SQL-Datenbank.
  • MongoDB ist frei/kostenlos nutzbar
  • MongoDB kann selbst oder in einer Cloud gehostet werden

Lies dazu hier.

Node.js + MongoDB könntest du bei Heroku oder NodeChef hosten. Andernfalls eignen sich Cloud Hosting-Anbieter wie AWS, Azure, Digital Ocean, usw. ... oder du holst dir einen vServer (z.B. bei IONOS, netcup, Strato, o.ä.) und richtest dir auf dem alles Notwendige selbst ein. Das keine dieser Lösungen kostenlos ist, sollte verständlich sein.

Wie benutzt man MongoDB (...)?

Schau in die Dokumentation.

(...) und ist das sinnvoll?

Wir reden in deinem Fall von keiner komplexen oder außergewöhnlichen Struktur, die zur Verwaltung komplizierter Operationen (Joins, o.ä.) bedarf. Du hast nur eine einfache Liste an Schlüsselwertpaaren, die in beiden Datenbanksystemen problemlos abgebildet werden kann.

Worüber man sich wenn eher Gedanken machen müsste, wäre die Update-Strategie, wobei auch das erst wirklich relevant werden sollte, wenn permanent tausende Anfragen in der Minute bearbeitet werden müssen. Belies dich für so einen Fall zu Load Balancing/Skalierung und schau außerdem, ob du nicht schon über eine geänderte Programmlogik für Entlastung sorgen kannst.

Irgendwelche Highscore-Tabellen/Rankingsysteme, o.ä. berechnet man am besten über einen separaten Job in bestimmten Zeitintervallen (z.B. an jedem Tag um 1 Uhr).

Von Firebase habe ich gehört, (...)

Auch zu Firebase gibt es eine offizielle Dokumentation.

  • Produkte
  • Preismodelle
...zur Antwort

1) In der Zeile, in der du das Array initialisierst, fehlt ein Semikolon am Zeilenende.

2) Deine Bezeichner würde ich nochmals überarbeiten:

  • Das Array könnte mit einem Namen wie numbers konkreter beschrieben werden.
  • inputs ist eine Pluralform, aber du liest in diesem Schritt nur eine Eingabe
  • Statt snake_style würde ich empfehlen, die übliche PascalCase-Konvention von C# einzuhalten. Aus min_Max_Sum wird demzufolge minMaxSum.
  • Für Zählervariablen wäre es besser, entweder einen passenden, aussagekräftigen Namen zu wählen (z.B. index) oder zumindest einen gängigen Namen wie i (= index/iteration).

3) Wenn wir einmal fest davon ausgehen, dass jede Eingabe ausnahmslos eine valide Ganzzahl ist, dann wäre eine for-Schleife besser geeignet, da dann die Zählervariable nur für den Kontext angelegt werden muss, in dem sie tatsächlich benötigt wird.

for (int index = 0; index < numbers.Length; ++index)
{
  var input = Console.ReadLine();
  numbers[index] = int.Parse(input);
}

In der Praxis ist es aber tatsächlich besser, sich gerade bei Eingaben von außen abzusichern. Bei einer invaliden Eingabe würde die Parse-Methode einen unbehandelten Ausnahmefall auslösen, der zum Programmabsturz führt.

Die TryParse-Methode ist die sichere Option. Wenn sie die Eingabe lesen kann, wird das Resultat in das out-Argument geschrieben und die Methode selbst liefert den Wert true zurück. Bei Misserfolg wäre die Rückgabe false.

Schlussendlich könnte man hier nun gut die do-while-Schleife nutzen:

var index = 0;

do
{
  var input = Console.ReadLine();

  if (int.TryParse(input, out var number))
  {
    numbers[index] = number;
    ++index;
  }
}
while (index < numbers.Length);

Natürlich sind while oder for ebenso möglich:

for (var index = 0; index < numbers.Length;)
{
  var input = Console.ReadLine();

  if (int.TryParse(input, out var number))
  {
    numbers[index] = number;
    ++index;
  }
}

Ich halte in diesem Fall aber die do-while (zumindest im Vergleich zu for) für die bessere Option, denn man kann an ihr schneller die verfolgte Absicht herauslesen.

Die for-Schleife steht üblicherweise für einen kontrollierten Ablauf, bei dem von vornherein klarer definiert ist, wie oft die Schleife ihren Körper wiederholen wird. Bei while/do-while ist das offener, da der Kopf/Fuß nur eine Bedingung aufnimmt.

Das Ergebnis von ReadLine schreibe ich übrigens in eine eigene Variable, damit man bei Bedarf leichter prüfen kann (z.B. via Debugger), was für ein tatsächlicher Wert von der Konsole gelesen wurde.

4) Deine Lösung, via Linq die Extremwerte herauszusuchen, ist natürlich schön kurz und bei den fünf Zahlen absolut kein Problem.

Behalte dennoch im Auge, dass du damit mehrmals über das Array läufst, obwohl du die gesuchten Werte auch schon beim Einlesen ermitteln könntest. Immerhin bräuchtest du lediglich zwei Variablen (min/max) die mit jeder neuen Eingabe verglichen werden. Ist die Eingabe größer/kleiner, dann wird der Wert der jeweiligen Variable überschrieben.

Müsstest du die Werte nicht in einem Array speichern, sollten Minimum und Maximum definitiv in der Eingabeschleife ermittelt werden.

...zur Antwort
JavaScript

Es wäre meiner Meinung nach aufgrund mehrerer Gründe besser, mit JavaScript anzufangen.

  • JavaScript ist weiter verbreitet als TypeScript
  • Es hilft später, bestimmte Verhaltensweisen besser zu verstehen (JS basiert bspw. auf einem prototypbasierten OOP-Modell, auf die nun eine Sprache wie TypeScript versucht, ein klassenbasiertes OOP-Modell draufzustülpen)

Bezüglich interessanter Themen für später:

  • Web-APIs (s. bspw. Canvas, DOM, Fetch, File, Intersection Observer, Mutation Observer, Push, WebSockets, Web Storage)
  • Die Features der Webentwicklungstools deines genutzten Browsers (Chrome/Firefox/Safari)
  • JS Design Patterns
  • Adaptive & Responsive Design (Vorgehensweisen, technische Mittel, ...)
  • Node.js, NPM und Bundling Tools (wie Vite, webpack, o.ä.)
  • Es wäre gut, sich in ein/e populäre/s JS-Bibliothek/Framework (z.B. Angular / NextJS / React / Svelte / Vue) schon einmal tiefer eingearbeitet zu haben
  • Das Gleiche gilt für CSS-Frameworks/Toolkits (s. Bootstrap, Tailwind, UIkit, ...)
  • CSS-Erweiterungen (wie LESS oder SCSS)
  • CSS Namenskonventionen (siehe BEM, SMACSS)
  • Storybooks
  • Test-Frameworks (wie Cypress, Jest, Mocha, Playwright, ...)
  • WCAG
  • Auch wenn es nicht mehr direkt in den Bereich Frontend gehört: Einmal mit einem CMS zu arbeiten, wäre nicht schlecht

Auch wenn ich bzgl. Tools oben meist mehrere Optionen nenne, reicht es vollkommen aus, sich jeweils nur eines herauszugreifen, um das darumliegende Konzept kennenzulernen. Sich direkt in alles einarbeiten zu wollen (z.B. alle genannten Testframeworks), wäre übertrieben. Womit du bei einem Arbeitgeber letztendlich tatsächlich einmal konfrontiert wirst, ist nicht absehbar.

(...) z.B. höre ich immer wie wichtig REST-APIs sind (...)

REST gibt Regeln vor, wie eine Schnittstelle aussehen soll, über die ein Client mit einem Server kommuniziert. Webartikel, die diese Architektur genauer beschreiben, gibt es viele (Beispiel). Ein einfaches Einstiegstutorial mit Node.js findest du beispielsweise im Postman Blog (einen Postman-Account benötigst du m.E. nicht; die Anfragen an die API kannst du genauso gut mittels Fetch stellen).

...zur Antwort

Mit dem Style gibst du vor, dass das Bild in der Breite 90% des Viewports einnehmen soll und setzt dazu noch einen Innenabstand. So entsteht eine größere Fläche als benötigt wird mit zusätzlichen Weißraum.

Ich würde mal sagen, dass du sicherlich die komplette CSS-Regel nicht brauchst. Gib allenfalls mit den Attributen width und height das Bildgrößenverhältnis vor.

Beispiel bei einem Bild mit den Maßen 500x200 Pixel:

<a href="..."><img class="rx6400" src="RX6400.png" alt="..." height="200" width="500"></a>

Mit dynamischer Ausrichtung an der Containergröße (in CSS):

.rx6400 { height: auto; width: 100% }

Um einen Abstand drumherum zu erhalten, solltest du nicht den Innenabstand des Bildes oder des Links ändern. Setze entweder einen Container ein und definiere für diesen einen Innenabstand (der Kürze halber hier nur als Inline-Style):

<div style="padding: 19%">
  <a href="..."><img ...></a>
</div>

oder nutze für den Link das margin-Property, um einen Außenabstand festzulegen.

Der Wert des alt-Attributs sollte im Übrigen aussagekräftiger sein. In deinem Fall übernimmt es die Rolle des Linktitels. Also wäre so etwas wie: Gehe zu RX6400 Produktseite passend.

...zur Antwort

Du kannst durchaus mit der Erwartung herangehen, dass er anfängt, sich Grundlagen anhand gestellter Aufgaben selbst anzueignen. Wie du selbst schon schreibst, natürlich mit Hilfe. Wenn er dabei bzgl. HTML, CSS, JS noch völlig ahnungslos ist, gib ihm halt Zeit, in der er selbstständig Tutorials o.ä. durchgeht. Du selbst solltest jedenfalls nicht deine Zeit damit aufwenden, ihm jegliche Syntaxregel u.ä. selbst beizubringen (das inkludiert nicht Detailfragen) - das dürfte auch dein Arbeitgeber so sehen.

Im besten Fall findest du eine Aufgabe, deren Erfüllung letzten Endes auch einen Mehrwert für eure Arbeit / die Firma bringt. Das könnte irgendeine Form an Analysetool sein (Beispiel: Ein HTML-Validationstool für eine Liste an URLs, der Quellcode dieser Seiten wird an den W3C Validator geschickt und dessen Ergebnis in einer Tabelle o.ä. aufbereitet; ein Browserplugin zur Kontrastanalyse) oder irgendeinen Wertegenerator (box-shadow/gradient/...). Andernfalls gibt es die klassischen Module (Akkordion, Tab View, Slider, Lightbox, Flyout, Formulare mit benutzerdefinierter Validation, Sticky Buttonbar, ...), an denen er sich (ohne Hilfe seitens Bibliotheken/Frameworks) versuchen könnte.

Wenn du ihm eine Aufgabe gibst, würde ich den Prozess in Phasen wie diese aufteilen:

  1. Du erklärst ihm, was du erwartest und erste Verständnisfragen können geklärt werden (es geht hierbei erst einmal nur darum, die Aufgabe zu verstehen - nicht um Umsetzungsfragen)
  2. Du gibst ihm Zeit, für eine erste Eigenanalyse (zwischen 15-60m): Wo hat er Probleme/Rückfragen? Wie könnte er an das Problem herangehen?
  3. Ihr besprecht seinen Plan und du kannst ihn in eine entsprechende Richtung lenken, sofern seine Ideen nicht gut sind
  4. Er beginnt mit Umsetzung/Recherche/...; bei Zwischenfragen unterstützt du
  5. Sobald er fertig ist, zeigt er sein Ergebnis
  6. Führe eine Code Review durch und besprich mit ihm Fehler/Verbesserungsmöglichkeiten/u.ä.

Bei einer komplexeren Aufgabe (s. meine ersten Vorschläge oben) macht es natürlich Sinn, die zuvor aufzusplitten. Er könnte bspw. mit HTML/CSS anfangen, der JS-Teil kommt später. Insofern würde auch eine Review je Phase Sinn machen.

Ihn direkt an die Software unseres Betriebs zu lassen, würde ihn vermutlich "erschlagen".

Eine direkte Konfrontation ist vermutlich nicht passend, doch früher oder später braucht es auch hier einen Übergang. Deswegen wäre es gut, bereits jetzt damit anzufangen, nach leichten Aufgaben Ausschau zu halten - sei es nun bezüglich Entwicklung oder Konfiguration. Und ob er sich nun selbst an ihnen (bzw. Teile davon) versucht oder ihr pair programming betreibt (du zeigst deine Herangehensweise, er schaut dabei zu).

Weihe ihn in bestimmte Arbeitsschritte (z.B. Build- und Deploymentprozesse) und Programmstrukturen (Bsp.: Wir verwenden CMS XY und das funktioniert grob so ...) ein.

Entsprechend wäre es evtl. besser eben etwas "spielerisch" zu starten.

Versuche es möglichst praxisbezogen zu halten. Ich gebe dir zwar Recht, dass Minispiele eine gute Übung sein können, aber ihn beispielsweise ein Schachspiel innerhalb der Arbeitszeit entwickeln zu lassen, halte ich nicht für passend. Das kann von einigen Personen falsch interpretiert werden, wenn sie das mitbekommen.

...zur Antwort

Auf die Kalenderansicht hast du keine Zugriffsmöglichkeit. Entweder du baust dir eine eigene oder du nutzt eine Bibliothek wie flatpickr, die das schon für dich übernimmt.

...zur Antwort

Ein Pfeil mit weiß ausgefüllter Spitze zeigt eine Vererbung an. Die Klasse, die mit dem Pfeil auf eine andere Klasse zeigt, erbt deren (für sie sichtbaren) Eigenschaften und Verhaltensweisen.

Bei einer einfachen Pfeilspitze (ohne Dreieckskopf) handelt es sich um eine Assoziation, bei der die Klasse am stumpfen Ende auf die Klasse (bzw. deren Attribute/Methoden) zugreift, auf welche der Pfeil zeigt. Das Kreuz am anderen Ende kann genutzt werden, um deutlich auszuschließen, dass diese Beziehung nicht auch in die andere Richtung gehen könnte.

...zur Antwort
Ich habe bisher nicht so viel Ahnung mit programmieren möchte es aber gerne lernen.

Lerne erst Programmieren (außerhalb von Engines), bevor du dich konkret der Spieleentwicklung widmest. Du brauchst das Grundlagenwissen (Wie kann man Lösungsalgorithmen zu Probleme entwickeln? Wie kann man sich mit der benötigten Programmiersprache formulieren?) und die Arbeit mit einem Framework/einer Engine baut erst darauf auf.

Wenn du mit Unity arbeiten möchtest, müsstest du dich mit C# vertraut machen. Solltest du dich für Unreal entscheiden, wäre C++ die erstbeste Wahl. Beides - das vorab - lässt sich nicht innerhalb weniger Tage erlernen. Das heißt, du solltest definitiv längerwährende Geduld und Motivation mitbringen.

Die Möglichkeiten der visuellen Programmierung (Bolt/Blueprints) klammere ich an dieser Stelle komplett aus, da es sich nur zum zusätzliche Hilfsmittel handelt, die die textuelle Programmierung nur zum Teil ersetzen sollen (lies mehr dazu hier).

(...) aber die sagen alle es ist abhängig welche Genre (...)

Grob kann man sagen (und so schlägt es sich auch auf den Markt nieder), dass Unity eher für klein-mittelgroße 2D-/3D-Spiele (Indie/AA) genutzt wird. Der von dir erwähnte Supermarket Simulator ist ein konkretes Beispiel, denn er wurde mit dieser Engine entwickelt.

Die Unreal Engine hingegen ist öfter auch im AAA-Bereich vertreten, unter anderem wenn es darum geht, tendentiell photorealistische Grafikstile zu erreichen (siehe bspw. Black Myth: Wukong).

Unity oder Unreal Engine?

Für dein Vorhaben würde sich Unity schon gut eignen. Ich halte sie und auch C# einsteigerfreundlicher als Unreal und C++. Im Unity Asset Store findest du evt. sogar ähnliche Assets.

Unabhängig davon kannst du mit beiden Engines zum gleichen Projektziel kommen.

...zur Antwort
Wie mache ich es, dass pro ordner ein JButton hinzugefügt wird?

Ich möchte eine Art Wiki mit Java machen, wo man Sachen herunterladen kann damit dass dann in der App angezeigt wird, doch ich weiß nicht wie ich es mache, dass ein JButton hinzugefügt wird wenn ein Ordner, da ist. Ich möchte dann auch, dass wenn man auf dem Button draufklickt, dass dann die Dateien darin auch aufgelistet werden und dann, wenn man darauf klickt, dass dann der inhalt der Datei angezeigt wird, kann mir jemand helfen?

Main.java

import javax.swing.*;

public class Main {
    public static void main(String[] arg) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                new Frame();
            }
        });
    }
}

Frame.java

import javax.swing.*;

public class Frame extends JFrame {
    public Frame() {
        setResizable(false);
        setSize(1000, 700);
        setDefaultLookAndFeelDecorated(true);
        setLocationRelativeTo(null);
        setTitle("JWiki.jar");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        add(new Panel());

        setVisible(true);
    }
}

Panel.java

import javax.swing.*;
import java.awt.*;

public class Panel extends JPanel { //GUI
    public Panel() {
        //Labels and Buttons
        JLabel l0 = new JLabel();
        l0.setText(".");
        l0.setBounds(0, 10, 10, 5);
        l0.setVisible(true);

        JLabel l1 = new JLabel();
        l1.setText("Downloaded Wikis");
        l1.setBounds(5, -10, 110, 50);
        l1.setVisible(true);

        JLabel l2 = new JLabel();
        l2.setText("Wiki Pages");
        l2.setBounds(120, -10, 65, 50);
        l2.setVisible(true);

        JButton b1 = new JButton();
        b1.setText("Test");
        b1.setBounds(5, 30, 101, 25);
        b1.setVisible(true);


        //Adding Labels and Buttons
        add(l0);
        add(l1);
        add(l2);

        add(b1);

        setLayout(null);
    }

    @Override
    public void paint(Graphics g) {
        super.paint(g);
        draw(g);
    } public void draw(Graphics g) {
        g.setColor(Color.black);
        g.fillRect(115, 5, 2, 700);
        g.fillRect(190, 0, 2, 700);
        g.fillRect(0, 5, 190, 2);
        g.fillRect(0, 25, 190, 2);
    }
}

...zur Frage
(...) doch ich weiß nicht wie ich es mache, dass ein JButton hinzugefügt wird wenn ein Ordner, da ist (...)

Immer wenn du weißt, dass sich die Ordnerauswahl geändert hat, kannst du dir die verfügbaren Verzeichnisse via Einzeiler holen:

var directories = new File("/your/root/path").listFiles(File::isDirectory);

Statt allerdings mit Buttons zu arbeiten, würde ich zur Auflistung der Seiten eine JTree-Komponente verwenden. Schau dir dazu den Artikel aus den Oracle Tutorialseiten an: Du kannst ein Model-Objekt an die Komponente binden, welches die Einträge enthält. Wenn sich das Model-Objekt ändert, wird die GUI-Komponente automatisch aktualisiert.

Um zu erfahren, welchen Eintrag ein Nutzer selektiert, kannst du einen TreeSelectionListener an die Komponente hängen. Du könntest dir dann den selektierten Modeleintrag holen, und dessen Detailtext (sofern es sich um einen Artikel handelt) in ein Label o.ä. hineinsetzen.

Versuche für deine Anwendung generell, via MVC-Architektur Daten und Oberflächenlogik strikt voneinander zu trennen. Änderungen des Models können via PropertyChangeListener an die Oberfläche übermittelt werden. Änderungen seitens der Oberfläche werden mittels Controllers (Listener) an die Model-Schicht übertragen.

(...) und dann, wenn man darauf klickt, dass dann der inhalt der Datei angezeigt wird (...)

Der Dateiinhalt sollte möglichst nur dann gelesen werden, wenn eine inhaltliche Änderung erwartbar ist. Bei vielen Dateien ist ein lazy load-Ansatz ratsam. Wenn der Datensatz das erste Mal tatsächlich aufgerufen wird, wird der Inhalt gelesen und in das Model gespeichert. Bei Folgeaufrufen kann man sich den Text aus dem Model holen. Es sei denn, es ist klar, dass zuvor eine Datenaktualisierung getätigt wurde.

Zuletzt noch ein paar Anmerkungen zu deinem Code:

1) Die invokeLater-Methode kann auch mit Lambda-Ausdrücken umgehen, was also eine Verkürzung des Codes bedeutet:

SwingUtilities.invokeLater(() -> new Frame());

2) Der Labeltext kann via Konstruktor gesetzt werden. Das Gleiche gilt für Buttons. Der setVisible-Aufruf ist nur für die JFrame-Instanz nötig.

JLabel l0 = new JLabel(".");

3) Auf nichtssagende Bezeichner wie l0, l1, b1, u.ä. würde ich verzichten. Benenne die Variablen doch nach ihrem Zweck (z.B. titleLabel, startButton, o.ä.), damit du später sofort weißt, auf welche konkrete Komponente sie referenzieren.

4) Wenn du Komponenten (JComponent-Klassen wie JPanel) neu zeichnen möchtest, dann nutze die paintComponent-Methode, nicht paint. Sie ist konkret für deinen Anwendungsfall da.

Die paint-Methode hingegen erfüllt eine übergeordnete Aufgabe: Sie ruft paintComponent auf und zeichnet zudem Ränder und Kindkomponenten.

5) Mit dem Festsetzen der Fenstergröße und anschließend absoluten Positionierung der Komponenten bist du auf dem besten Weg, eine nutzerunfreundliche, bzw. für einige Nutzer sogar unbedienbare grafische Oberfläche aufzubauen.

Nebenher machst du es dir selbst noch schwer: Beim Einfügen neuer Komponenten musst du Koordinaten und Größen anderer Komponenten gegebenfalls aufwendig umordnen. Wenn es zu fehlerhaften Darstellungen (fehlende Ränder, Flimmereffekte/nicht sichtbare Komponenten, u.ä.) kommt, bräuchtest du dich ebenso nicht wundern. Es hängt meist mit fehlerhaften Größenberechnungen/-aufteilungen und null-Layouts zusammen.

Vergiss besser setBounds, entferne auch den setResizable-Aufruf und beschäftige dich mit Layout Managers. Sie sind eines der zentralen Konzepte von Swing. Selbst für den Fall, dass du sie zu kompliziert findest, gibt es noch Ausweichmöglichkeiten wie Drag & Drop-Designer (GUI Designer in IntelliJ / Matisse in NetBeans / WindowBuilder in Eclipse), die dir letzten Endes deutlich bessere Ergebnisse liefern, als mit deinem Ansatz.

Solltest du deine bisherige Vorgehensweise (setBounds, paint, ...) so aus einer bestimmten Lernquelle bezogen haben, würde ich dir raten, diese schleunigst zu entsorgen.

Stattdessen (und generell) würde ich dir empfehlen, mehr mit den Oracle Tutorials zu arbeiten. Sie stellen alle Konzepte und Komponenten genau vor und bieten dazu sogar noch komplette Praxisbeispiele.

...zur Antwort
  1. Einen tatsächlichen 3D-Support gibt es nicht. Stattdessen aber Methoden, um 3D-Effekte zu simulieren. Im Scratch Wiki steht mehr dazu.
  2. Scratch ist derzeit noch nicht darauf ausgelegt, direkt auf Android/iOS ausgespielt zu werden, daher werden bislang nur Browser als Ausspielquelle benutzt. Auf alle Sensoren eines mobilen Endgeräts hast du mit Scratch selbst keinen Zugriff. Einfache Touchevents dürften (im mobilen Browser) allerdings behandelt werden können, indem man Klickevents nutzt. Eine besser auf mobile Endgeräte abgestimmte Alternative zu Scratch, wäre Catrobat in der Pocket Code-App (ebenso ohne tatsächlichen 3D-Support).

Wenn du Spiele mit mehr technischer Freiheit entwickeln möchtest, würde ich dir empfehlen, eine textuelle Programmiersprache zu lernen und dich im Anschluss mit entsprechenden Bibliotheken/Frameworks/Engines für die Spieleentwicklung auseinanderzusetzen. Ein paar Optionen dahingehend wären C# (in Unity), GDScript (in Godot) oder Lua (in Defold).

...zur Antwort

An der Stelle würde ich zunächst anführen, dass Roblox seit ein paar Jahren eine eigene, weiterentwickelte Form von Lua (5.1) nutzt: Luau. Neben ein paar Anpassungen unter der Haube (Performanceoptimierungen, u.ä.) beinhaltet diese noch ein paar Syntax-Features (z.B. neue Schlüsselwörter, mehr Support für Typinterferenz, u.ä.), die es in Lua selbst nicht gibt.

Du kannst natürlich trotzdem mit Lua beginnen, solltest dann aber berücksichtigen, dass du dich danach ebenso mit den neuen Features von Luau beschäftigen müsstest.

Material zu Lua findest du hier:

  • Lua Manual (offizielle Dokumentation)
  • Lua for Programmers (bis Lua 5.1)
  • Tutorialspoint (bis Lua 5.2)
  • lua-users-Wiki (nur noch via Wayback Machine erreichbar)

Und für Luau/Roblox kannst du in diese Quellen schauen:

  • Die offizielle Dokumentation
  • Tutorials/Artikel auf dem Roblox Developer Hub
  • Auf dem YouTube-Kanal von Suphi Kaner findest du eine Sammlung an Tutorial zu einzelnen, speziellen Themen/Anwendungsfällen
...zur Antwort
Wenn man "Programming" googlet kommt als erstes dass Bild:

Zunächst sollte hierbei berücksichtigt werden, dass es das Ergebnis einer Suchmaschine ist, die ihr eigenes internes Rankingsystem hat und dabei weitere Kriterien einbezieht (z.B. Suchverhalten, Sprache, Zeit und Ort des Nutzers). Selbst wenn Google mehr als Metadaten für die gecrawlten Bilder einbezieht, kann man nicht erwarten, dass die Ergebnisse akkurat sind.

Das heißt: Zum einen können unterschiedliche Nutzer unterschiedliche Ergebnisse erhalten (ich bekomme z.B. aktuell ein Bild, auf dem Python-Code zu sehen ist) und zum anderen kann man wohl nicht ganz ausschließen, dass man es mit den richtigen Metadaten auch schaffen könnte, die Abbildung eines weißen Kaninchens auf Platz 1 zu bringen.

Eine von Menschen explizit gewählte Repräsentation zum Begriff Programming (oder Programmiersprache) ist HTML nicht.

Wenn man hinterfragen möchte, wieso es solche Bilder in entsprechende Fachartikel schaffen, kann man wohl nur davon ausgehen, dass Gründe wie Unwissenheit, Ressourcenmangel (es gab kein anderes Bild im verfügbaren Bilderpool), ein bestimmtes Ästhetikverständnis oder fehlende Sorgfältigkeit hineingespielt haben.

Ja ich weiss, dass ich ken HTML, aber es ist SVG, (...)

Auf deinem Bild ist HTML-Code zu sehen, in dem SVG-Elemente eingebettet sind.

Trotzdem denken wir alle ans Programieren, wieso?

Noch bevor man den Textinhalt auf dem Bild tatsächlich erfasst, kann man schon Informationen wie diese herausziehen:

  • Es ist das Foto eines Bildschirms; die Ansicht ist aus der Schräge
  • Es ist Text mit einer speziellen Formatierung (Einrückungen, kein zusammenhängender Text)
  • Heller Text befindet sich in einem Programm mit dunklem Hintergrund

Perspektive und Farbkontrast sind zusammen ein häufig genutztes Stilmittel (in Webartikeln von Computermagazinen, u.ä.), um Bildschirmtext (insbesondere Programmcode) interessant darzustellen. Du kannst ja einmal weiter im Ergebnis deiner Google Bildersuche schauen: Ich bin mir sicher, dass die Mehrzahl an Fotos Aufnahmen aus der Schräge sind und man meist helle Texte mit dunklen Programmhintergründen hat.

Das heißt, auf den ersten Blick wird unser Gehirn das Bild in die Schublade packen, wie es ihm der bisherige mediale Konsum schon beigebracht hat. Ob auf dem Bild dann nun eine Programmiersprache zu sehen ist, eine Fantasiesprache oder irgendetwas anderes, ist bis hierhin erst einmal völlig egal.

Bei genauerer Betrachtung kann man nun, je nach Wissensstand, andere spezifische Schlüsse ziehen. Ein Experte erkennt, um welche Computersprache es sich handelt, ein Laie vergleicht es mit ähnlich Bekanntem und ordnet dementsprechend ein. Ich denke, beide Gruppen können dennoch eine Assoziation zur Programmierung ziehen, da HTML/SVG (bzw. für Laien: Code) nun einmal im Umfeld der Programmierung/Softwareentwicklung Einsatz findet.

Beim Erfassen von Informationen wird es seitens des Gehirns wohl immer den Versuch geben, bekannte Assoziationen hervorzurufen, die letztendlich der Lageeinordnung/-bewertung dienlich sein können. Wenn ich zum Beispiel an ein Reh denke, habe ich nicht nur ein Reh vor Augen, sondern ein Reh im Wald.

...zur Antwort

UI bezeichnet allgemein eine Schnittstelle, über die ein Nutzer mit einer Anwendung (bzw. dem Computer) kommunizieren kann.

Beispiele:

  • Eingaben über Touchpad, Fernbedienung, Maus, Tastatur, Joystick, u.ä.
  • Der Computer könnte auf Geräusche/deine Stimme reagieren (siehe Alexa oder Google Mini)
  • Der Computer könnte auf Bewegungen reagieren (Bewegen des Geräts, Bewegung vor einer Kamera)
  • Grafische oder textbasierte Oberflächen (z.B. die Kommandozeile)

Eine grafische Oberfläche (GUI) ist folglich eine konkrete Art an UI. Sie stellt dem Nutzer grafische Komponenten (Buttons, Dropdowns, Eingabefelder, u.ä.) zur Verfügung, über die er mit dem Programm interagieren kann.

Klassische Beispiele dafür findest du hier:

  • Bei Betriebssystemen wie macOS, iOS, Android OS oder Windows OS
  • Auf Webseiten
  • Bei Menüs in Computerspielen
...zur Antwort

Das Array bietet dir für den Zugriff auf seine Elemente nur eine Schnittstelle:

myArray[...]

Diese Schnittstelle erwartet stets den Indexwert. Solltest du einen Wert außerhalb des Indexbereich angeben, wird dir das Programm einen Laufzeitfehler zurückgeben.

Wenn du an anderen Stellen deines Codes nicht mit dem Indexwert arbeiten möchtest, musst du bei Kommunikation mit dem Array umrechnen.

Beispiel:

int last = myArray.length;
System.out.println(myArray[last - 1]);

Für solche Fälle solltest du dann auch darauf achten, sehr klare Namen zu wählen. Im besten Fall arbeitest du von Beginn an immer mit dem Indexwert.

int lastIndex = myArray.length - 1;
System.out.println(myArray[lastIndex]);

Im Reden/Schreiben über die Sprache wäre es ebenfalls vorteilhaft, sich stets klar auszudrücken.

Beispiel:

Das dritte Element im Array hat den Index 2.
...zur Antwort