Web 0.14.2: Java in der Konsole (Angeberwissen) und Grafiken in L20 repariert

CHANGELOG.md

@@ -15,6 +15,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Added
 
+- **Web 0.14.2, Java in the console:** lesson 20 step „Wie Java auf jedem Computer läuft“ has a new Angeberwissen box on `java -version`, `javac Einmaleins.java` and `java Einmaleins`, plus the hint that a missing `javac -version` means only a JRE is installed (de/en/pt). Fix: the two diagrams in that step were missing their closing `:::`, so in 0.14.1 the text after the first diagram showed up as its caption; they now have short captions, and a new test flags overly long captions.
 - **Web 0.14.1, how Java runs on every computer:** lesson 20 has a new step „Wie Java auf jedem Computer läuft“ after „Snippet oder Class“: source code → compiler `javac` → bytecode (`.class`) → JVM on Windows/macOS/Linux, platform independence („Write once, run anywhere“), the JVM pictured as a small computer made of software (but a virtual machine, not an operating system), a table JRE vs. JDK, the JVM translating bytecode into machine code (JIT compiler), and a comparison with C++ (compiled directly to machine code, so once per system; second diagram l20-cpp.svg and a C++/Java table). New self-drawn diagram l20-jvm.svg (de/en/pt), the CAFEBABE Angeberwissen moved into the new step, three competences, three checklist lines and three quiz questions. Lesson 4 „Jetzt in Java“ points to lesson 20. New glossary entries Quellcode, Compiler, Bytecode, Maschinencode, JIT-Compiler, JVM, JRE, JDK, plattformunabhängig and Nachschlagen section „Java › Vom Code zum Programm“ (de/en/pt).
 - **Web 0.14.0, new world VisuFlow: draw flowcharts:** fourth world next to VisuStruct, VisuBot and VisuObject (…/app/?visuflow, colour violet, chosen at the start or in the gear menu; the world chooser now has two rows). Only drawing, no simulation and no code: drag the DIN 66001 symbols (Start, Anweisung, Ein-/Ausgabe, Verzweigung, Unterprogramm, Ende) from the bar onto the canvas, or tap a symbol to add it below the selected one, joined by an arrow; type the text right in the symbol (tap again or double click to change it). Drag an arrow from the dot at an exit to the next symbol; the diamond has the exits ja and nein (button „ja/nein tauschen“ swaps their sides), arrows run at right angles, loops go around on the right. Move with the mouse, finger or arrow keys on a 20 px grid, delete, undo/redo, title above the canvas, example „Tee kochen“ from lesson 1. Save and open as `.visuflow` file (the last plan stays in the browser), export as PNG, SVG or PDF (A4). Texts de/en/pt.
 - **Web 0.13.38, comments in Java:** lesson 6 has a new step „Kommentare im Code“ after „Jetzt in Java“: single-line `//` and multi-line `/* … */` comments, Java skips them and the structure chart stays the same; Javadoc `/** … */` is only mentioned. The IPO example (with „Im Editor öffnen“) shows the task in a multi-line comment, `// Eingabe`, `// Verarbeitung`, `// Ausgabe`, an explanation after a line, the expected output and a note for next time; plus a fill-in-the-gaps exercise, an Angeberwissen (PL/I 1964, BCPL 1967), a competence, a checklist line and two quiz questions. Lesson 14 marks closing brackets with `} // Ende if` / `} // Ende for`, lesson 20 the class frame with `} // Ende main` / `} // Ende Klasse`. New glossary entry Kommentar and Nachschlagen section „Java › Kommentare“ (de/en/pt).

web/lessons/de/20-java.md

@@ -119,12 +119,16 @@ Deine Datei `Einmaleins.java` ist **Quellcode**: Text für Menschen. Der Prozess
 2. Die **JVM** (Java Virtual Machine) liest den Bytecode und übersetzt ihn beim Ausführen in **Maschinencode**, also in Befehle für den Prozessor deines Computers.
 
 ::: grafik l20-jvm.svg
+Einmal kompilieren: Derselbe Bytecode läuft auf jeder JVM.
+:::
 
 Den Bytecode gibt es nur einmal. Die JVM gibt es dagegen für Windows, macOS, Linux und viele andere Systeme. Deshalb läuft dieselbe `.class`-Datei auf jedem Computer, auf dem eine JVM installiert ist. Das nennt man **plattformunabhängig**. Der Werbespruch dazu heißt **„Write once, run anywhere“**: einmal schreiben, überall ausführen.
 
 Zum Vergleich **C++**: Dort übersetzt der Compiler den Quellcode direkt in Maschinencode für genau einen Prozessor und ein Betriebssystem. Das fertige Programm läuft nur dort. Für Windows, macOS und Linux musst du es jeweils neu kompilieren.
 
 ::: grafik l20-cpp.svg
+C++ wird für jedes System einzeln zu Maschinencode kompiliert.
+:::
 
 | | C++ | Java |
 |---|---|---|
@@ -145,6 +149,22 @@ Beim Installieren begegnen dir zwei Abkürzungen:
 
 Zum Programmieren brauchst du also das JDK. Heute lädt man meist nur noch das JDK herunter, die JRE steckt darin. Für VisuStruct im Browser musst du nichts davon installieren.
 
+::: angeberwissen
+Mit einem JDK kannst du alles auch selbst in der Konsole machen, also im Terminal oder in der Eingabeaufforderung:
+
+```
+java -version
+javac Einmaleins.java
+java Einmaleins
+```
+
+- `java -version` zeigt, welche Java-Version installiert ist. Kommt eine Fehlermeldung, fehlt Java noch.
+- `javac Einmaleins.java` startet den Compiler. Danach hast du zwei Dateien im Ordner: `Einmaleins.java` mit deinem Quellcode und neu `Einmaleins.class` mit dem Bytecode.
+- `java Einmaleins` startet die JVM mit deinem Bytecode. Den Klassennamen schreibst du hier ohne `.class`.
+
+Klappt `java -version`, aber `javac -version` nicht, ist nur eine JRE installiert. Dann fehlt dir das JDK.
+:::
+
 ::: angeberwissen
 Jede übersetzte Java-Datei (`.class`) beginnt mit denselben vier Bytes, in Hexadezimal geschrieben: `CA FE BA BE`. Daran erkennt der Computer, dass es Java ist. Das „Kaffee-Baby“ hat sich James Gosling ausgedacht, passend zum Kaffee im Namen.
 :::

web/lessons/en/20-java.md

@@ -119,12 +119,16 @@ Your file `TimesTable.java` is **source code**: text for people. The processor i
 2. The **JVM** (Java Virtual Machine) reads the bytecode and, while running it, translates it into **machine code**: instructions for the processor in your computer.
 
 ::: grafik l20-jvm.svg
+Compile once: the same bytecode runs on every JVM.
+:::
 
 There is only one bytecode. But there is a JVM for Windows, macOS, Linux and many other systems. That is why the same `.class` file runs on every computer that has a JVM installed. This is called **platform independent**. The slogan for it is **“Write once, run anywhere”**.
 
 Compare this with **C++**: there the compiler translates the source code directly into machine code for exactly one processor and one operating system. The finished program only runs there. For Windows, macOS and Linux you have to compile it again each time.
 
 ::: grafik l20-cpp.svg
+C++ is compiled to machine code separately for every system.
+:::
 
 | | C++ | Java |
 |---|---|---|
@@ -145,6 +149,22 @@ When you install Java you meet two abbreviations:
 
 So to program you need the JDK. Today you usually only download the JDK, the JRE is inside it. For VisuStruct in the browser you don't need to install any of this.
 
+::: angeberwissen
+With a JDK you can do all of this yourself in the console, that is in the terminal or the command prompt:
+
+```
+java -version
+javac TimesTable.java
+java TimesTable
+```
+
+- `java -version` shows which Java version is installed. If you get an error message, Java is still missing.
+- `javac TimesTable.java` starts the compiler. Afterwards there are two files in the folder: `TimesTable.java` with your source code and the new `TimesTable.class` with the bytecode.
+- `java TimesTable` starts the JVM with your bytecode. Here you write the class name without `.class`.
+
+If `java -version` works but `javac -version` doesn't, only a JRE is installed. Then you are missing the JDK.
+:::
+
 ::: angeberwissen
 Every compiled Java file (`.class`) starts with the same four bytes, written in hexadecimal: `CA FE BA BE`. That is how the computer recognises it as Java. James Gosling came up with this “cafe babe”, to go with the coffee in the name.
 :::

web/lessons/pt/20-java.md

@@ -119,12 +119,16 @@ O teu ficheiro `Tabuada.java` é **código-fonte**: texto para pessoas. O proces
 2. A **JVM** (Java Virtual Machine, máquina virtual Java) lê o bytecode e, ao executá-lo, traduz-o em **código máquina**: instruções para o processador do teu computador.
 
 ::: grafik l20-jvm.svg
+Compilar uma vez: o mesmo bytecode corre em qualquer JVM.
+:::
 
 O bytecode existe só uma vez. Já a JVM existe para Windows, macOS, Linux e muitos outros sistemas. Por isso, o mesmo ficheiro `.class` corre em qualquer computador que tenha uma JVM instalada. A isto chama-se **independente da plataforma**. O lema é **“Write once, run anywhere”**: escrever uma vez, executar em qualquer lado.
 
 Compara com o **C++**: aí o compilador traduz o código-fonte diretamente em código máquina para um só processador e um só sistema operativo. O programa pronto só corre aí. Para Windows, macOS e Linux tens de o compilar de novo de cada vez.
 
 ::: grafik l20-cpp.svg
+O C++ é compilado para código máquina em separado para cada sistema.
+:::
 
 | | C++ | Java |
 |---|---|---|
@@ -145,6 +149,22 @@ Ao instalar o Java, encontras duas siglas:
 
 Para programar precisas, portanto, do JDK. Hoje em dia normalmente só se descarrega o JDK, o JRE vem lá dentro. Para usar o VisuStruct no browser não precisas de instalar nada disto.
 
+::: angeberwissen
+Com um JDK podes fazer tudo isto tu próprio na consola, ou seja, no terminal ou na linha de comandos:
+
+```
+java -version
+javac Tabuada.java
+java Tabuada
+```
+
+- `java -version` mostra que versão do Java está instalada. Se aparecer uma mensagem de erro, ainda falta o Java.
+- `javac Tabuada.java` inicia o compilador. Depois tens dois ficheiros na pasta: o `Tabuada.java` com o teu código-fonte e o novo `Tabuada.class` com o bytecode.
+- `java Tabuada` inicia a JVM com o teu bytecode. Aqui escreves o nome da classe sem `.class`.
+
+Se `java -version` funcionar mas `javac -version` não, só tens um JRE instalado. Nesse caso falta-te o JDK.
+:::
+
 ::: angeberwissen
 Todos os ficheiros Java compilados (`.class`) começam com os mesmos quatro bytes, escritos em hexadecimal: `CA FE BA BE`. É assim que o computador reconhece que é Java. Foi James Gosling que inventou este “cafe babe”, a condizer com o café do nome.
 :::

web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "visustruct-web",
   "private": true,
-  "version": "0.14.1",
+  "version": "0.14.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

web/test/lessons.test.ts

@@ -51,6 +51,12 @@ describe.each(contentLanguages)('Lernbereich: Inhalte (%s)', (lang) => {
     }
   })
 
+  it('jede Grafik-Unterschrift ist kurz (sonst fehlt das schließende „:::“)', () => {
+    for (const { where, block } of allBlocks()) {
+      if (block.kind === 'graphic' || block.kind === 'images') expect(block.caption.length, `${where}: ${block.caption.slice(0, 60)}`).toBeLessThan(400)
+    }
+  })
+
   it('keine Schleife in einem Diagramm ist leer (Inhalt gehört in <schleifeninhalt>)', () => {
     const loops = [ElementType.forSchleife, ElementType.whileSchleife, ElementType.doUntilSchleife, ElementType.endlosschleife]
     const check = (els: VSElement[], where: string) => {