Skip to content

Commit

Permalink
chore(de): translate diff [edb6062227]
Browse files Browse the repository at this point in the history
Machine translation from English using gpt-4o-2024-08-06.

Source: mdn/content@edb6062

System prompt:

```md
You are tasked with translating MDN Web Docs content from English to German.

Ensure that the translation is accurate, preserves technical terminology, and follows the rules provided below.

# Rules for Translation

1. Format:

   - The input is a Markdown file.
   - The output should be a Markdown file.
   - Return the raw output, without wrapping it in a Markdown code block.
   - Keep GFM alert syntax untranslated, such as `> [!NOTE]`, `> [!WARNING]`, and `> [!CALLOUT]`.
   - If the input contains HTML tags wrapped in backticks (e.g. `<video>`), make sure they are wrapped in the output.
   - If the input contains HTML tags escaped with a slash (e.g. `\<length>`), make sure they are escaped in the output.

2. Language:

   - Prefer formal language ("Sie") over informal language ("du").

3. Code blocks:

   - Do not translate code blocks.
   - Do not translate terms wrapped in backticks.

4. Macro calls:

   - MDN uses macros for dynamic content insertion. These macros must remain **unchanged** and not translated.
   - Macro calls start with `{{`, followed by the macro name, optional parameters, and end with `}}`.
   - Avoid invalid macro calls by ensuring curly braces, parentheses, and quotes are closed properly.

5. Technical terms and code snippets in text:

   - Keep technical terms like element names, attributes, and method names in **English**. Only translate the surrounding descriptive text.

6. Links and References:

   - Translate link descriptions, but keep the URLs and their structure intact.
   - Do not change the locale in URLs.

7. Glossary:

   - "Browser compatibility" => "Browser-Kompatibilität"
   - "Guide" => "Leitfaden"
   - "How to" => "Anleitung"

# Translation Scope

Translate the following Markdown content from **English** to **German** while adhering to the rules above.
```
  • Loading branch information
mdn-bot committed Jan 27, 2025
1 parent 4d5da30 commit bbd04cc
Show file tree
Hide file tree
Showing 10 changed files with 238 additions and 201 deletions.
22 changes: 22 additions & 0 deletions files/de/glossary/bun/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
title: Bun
slug: Glossary/Bun
l10n:
sourceCommit: edb606222736c292c412a4373b88df91c18c50ac
---

{{GlossarySidebar}}

**Bun** ist eine schnelle und moderne {{Glossary("JavaScript", "JavaScript")}}-Laufzeitumgebung, die darauf ausgelegt ist, Leistung und Entwicklerwerkzeuge zu priorisieren.

Im Gegensatz zu [Node.js](https://nodejs.org/) und [Deno](https://deno.com/) basiert Bun auf Apples [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore). Zu den bemerkenswerten Funktionen von Bun gehören:

- Nahtloser Node.js-Ersatz: Fast alle Node.js-Programme können mit Bun-äquivalenten Befehlen ausgeführt werden.
- Hochmoderne JavaScript-Ausführungsgeschwindigkeit in den meisten realen Szenarien.
- Native Unterstützung für JavaScript-Syntaxerweiterungen wie JSX und TypeScript.
- Globaler Cache zur Verwaltung von Paketinstallationen, um die Festplattennutzung zu minimieren.
- Integrierter Bundler, Transpiler, [Jest](https://jestjs.io/)-kompatibler Test-Runner, Paketmanager und weitere integrierte Dienstprogramme, die für Webentwickler nützlich sein können.

## Siehe auch

- [Bun-Website](https://bun.sh/)
48 changes: 24 additions & 24 deletions files/de/learn_web_development/core/design_for_developers/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,88 +2,88 @@
title: Design für Entwickler
slug: Learn_web_development/Core/Design_for_developers
l10n:
sourceCommit: c4c270ae9af4adf462c058a6e646355611323784
sourceCommit: 5d5f7a8f52ad9b21eb4b8f6dd9d0afce23d1bdf6
---

{{LearnSidebar}}

{{NextMenu("Learn_web_development/Core/Version_control", "Learn_web_development/Core")}}

> [!NOTE]
> Wie Sie unten sehen werden, ist dieses Modul derzeit nur ein grober Lehrplan. Wir beabsichtigen, es in Zukunft in einen vollständigen Kurs umzuwandeln, sobald die Zeit es zulässt.
> Wie unten zu sehen, ist dieses Modul derzeit nur ein Curriculum-Umriss/Syllabus. Wir planen, es in Zukunft, wenn die Zeit es erlaubt, in einen vollständigen Kurs umzuwandeln.
Die Idee dieses Moduls ist es, Entwicklern (wieder) das Design-Denken näherzubringen. Sie möchten möglicherweise nicht als Designer arbeiten, aber ein grundlegendes Verständnis von Benutzererfahrung und Designtheorie ist für alle, die an der Website-Entwicklung beteiligt sind, wertvoll, egal welche Rolle sie dabei spielen. Zumindest sollten selbst die technischsten Entwickler, die keine „Designer“ sind, Designbriefe verstehen, warum Dinge so gestaltet sind, wie sie sind, und in der Lage sein, sich in das Denken des Benutzers hineinzuversetzen. Außerdem hilft es ihnen, ihre Portfolios ansprechender zu gestalten.
Die Idee dieses Moduls ist es, Entwicklern das Design Thinking (wieder) näherzubringen. Sie möchten vielleicht nicht als Designer arbeiten, aber ein grundlegendes Verständnis für Benutzererfahrung und Designtheorie ist für jeden, der an der Erstellung von Websites beteiligt ist, von Vorteil, unabhängig von seiner Rolle. Zumindest sollte selbst der technischste "Nicht-Designer"-Entwickler Design-Briefs verstehen, warum Dinge so gestaltet sind, wie sie sind, und in der Lage sein, sich in die Denkweise des Nutzers hineinzuversetzen. Und es wird ihnen helfen, ihre Portfolios besser aussehen zu lassen.

Darüber hinaus werden Frontend-Entwickler oft mit verschiedenen Designaufgaben in Projekten betraut. Kunden und Arbeitgeber gehen häufig davon aus, dass sie dies können, weil sie in die visuellen Elemente der Website eingebunden sind. Historisch gesehen war der „Webentwickler“ einst mehr eine hybride Designer-/Entwickler-Rolle als heute.
Darüber hinaus wird von Frontend-Entwicklern oft erwartet, dass sie einige Designaufgaben in Projekten übernehmen. Kunden und Arbeitgeber gehen oft davon aus, dass sie dies können, weil sie in die visuellen Elemente der Website eingebunden sind. Historisch gesehen war die Rolle des "Webentwicklers" mehr eine hybride Designer-/Entwicklerrolle als sie es heute ist.

## Voraussetzungen

Bevor Sie mit diesem Modul beginnen, sollten Sie mit [HTML](/de/docs/Learn_web_development/Core/Structuring_content) und [CSS](/de/docs/Learn_web_development/Core/Styling_basics) vertraut sein.

> [!NOTE]
> Wenn Sie an einem Computer/Tablet/anderen Gerät arbeiten, bei dem Sie nicht in der Lage sind, Ihre eigenen Dateien zu erstellen, könnten Sie (die meisten) der Code-Beispiele in einem Online-Coding-Programm wie [JSBin](https://jsbin.com/) oder [Glitch](https://glitch.com/) ausprobieren.
> Wenn Sie an einem Computer/Tablet/anderen Gerät arbeiten, auf dem Sie nicht in der Lage sind, eigene Dateien zu erstellen, könnten Sie (die meisten) Codebeispiele in einem Online-Coding-Programm wie [JSBin](https://jsbin.com/) oder [Glitch](https://glitch.com/) ausprobieren.
## Lektionen

## Grundlegende Designtheorie

Lernziele:

- UI-Design-Grundlagen:
- Grundlagen des UI-Designs:
- Kontrast.
- Typografie.
- Visuelle Hierarchie.
- Maßstab.
- Ausrichtung.
- Nutzung von Leerraum.
- Verwendung von Leerraum.
- Farbtheorie.
- Verwendung von Bildern.

Ressourcen:

- [Grundlegende Text- und Schriftgestaltung](/de/docs/Learn_web_development/Core/Text_styling/Fundamentals)
- [Grundlegende Text- und Schriftstilgestaltung](/de/docs/Learn_web_development/Core/Text_styling/Fundamentals)

## Nutzerzentriertes Design

Lernziele:

- Verstehen, dass alles, was wir tun, für den Benutzer ist.
- Verstehen, dass alles, was wir tun, für den Nutzer ist.
- Einführung in Benutzerforschung/-tests und Benutzeranforderungen.
- Design für Barrierefreiheit — Berücksichtigung der Zielgruppe und ihrer zusätzlichen Bedürfnisse. Entwerfen Sie für diese von Anfang an.
- Verstehen, was Designmuster sind, und die gängigen Muster, die im Web verwendet werden, z. B.:
- Dunkler Modus.
- Breadcrumbs (Brotkrümelnavigation).
- Design für Barrierefreiheit — Berücksichtigen Sie die Zielgruppe und welche zusätzlichen Bedürfnisse sie haben könnte. Gestalten Sie von Anfang an für diese.
- Verstehen, was Designmuster sind, und die gängigen Muster, die im Web verwendet werden, zum Beispiel:
- Dunkelmodus.
- Breadcrumbs.
- Karten.
- Aufgeschobene/träge Registrierung.
- Aufgeschobene/Lazy Registrierung.
- Unendliches Scrollen.
- Modale Dialoge.
- Progressive Offenlegung.
- Fortschrittsanzeige bei Formularen/Registrierung/Einrichtung.
- Fortschrittsanzeige in Formularen/Registrierung/Einrichtung.
- Einkaufswagen.

Ressourcen:

- [Überblick über Barrierefreiheit](/de/docs/Learn_web_development/Core/Accessibility)
- [Prinzipien des inklusiven Designs](https://inclusivedesignprinciples.info/), inclusivedesignprinciples.info
- [Prinzipien des inklusiven Designs](https://inclusivedesignprinciples.info/)

## Design-Briefings
## Design-Briefs

Lernziele:

- Die Sprache des Designs sprechen, um mit Designern zu kommunizieren.
- Interpretation von Anforderungen in Design-Briefings zur Erstellung einer Implementierung.
- Typische Werkzeuge, die Designer verwenden, um ihre Botschaft an Entwickler zu übermitteln (z. B. Figma).
- Sprechen der Designsprache, um mit Designern zu kommunizieren.
- Interpretation von Anforderungen aus Design-Briefs zur Erstellung einer Implementierung.
- Typische Werkzeuge, die Designer verwenden, um ihre Botschaft an Entwickler zu übermitteln (z.B. Figma).

## Siehe auch

- [Learn UI Design Fundamentals](https://scrimba.com/learn/design?via=mdn), Scrimba <sup>Kurs-Partner</sup>
- [Learn UI Design Fundamentals](https://scrimba.com/learn/design?via=mdn), Scrimba <sup>Kurs Partner</sup>
- [The Shape of Design](https://shapeofdesignbook.com/chapters/00-introduction/), Frank Chimero
- [Designing for the Web](https://designingfortheweb.co.uk/), Mark Boulton
- [Design trampoline: Grundlagen der Designtheorie lernen](https://designtrampoline.org/), Anna Riazhskikh
- [Design trampoline: Learn design theory basics](https://designtrampoline.org/), Anna Riazhskikh
- [Practical Typography](https://practicaltypography.com/), Matthew Butterick
- [Web typography made simple](https://designforweb.org/vis/chapter2-typography/typelab-by-HannahBoom/), Hannah Boom
- [Web Style Guide](https://webstyleguide.com/), Patrick J. Lynch und Sarah Horton
- [Visuelle Designregeln, denen Sie immer sicher folgen können](https://anthonyhobday.com/sideprojects/saferules/), Anthony Hobday
- [16 kleine UI-Design-Regeln, die großen Einfluss haben](https://www.adhamdannaway.com/blog/ui-design/16-ui-design-rules), Adham Dannaway
- [Visual design rules you can safely follow every time](https://anthonyhobday.com/sideprojects/saferules/), Anthony Hobday
- [16 little UI design rules that make a big impact](https://www.adhamdannaway.com/blog/ui-design/16-ui-design-rules), Adham Dannaway

{{NextMenu("Learn_web_development/Core/Version_control", "Learn_web_development/Core")}}
20 changes: 10 additions & 10 deletions files/de/web/api/cssstyledeclaration/getpropertyvalue/index.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
title: "CSSStyleDeclaration: Methode getPropertyValue()"
title: "CSSStyleDeclaration: getPropertyValue() Methode"
short-title: getPropertyValue()
slug: Web/API/CSSStyleDeclaration/getPropertyValue
l10n:
sourceCommit: 5af8d52f5dec28f5a5556b1b98765847098a0071
sourceCommit: 5d5f7a8f52ad9b21eb4b8f6dd9d0afce23d1bdf6
---

{{ APIRef("CSSOM") }}

Die **CSSStyleDeclaration.getPropertyValue()** Methodenschnittstelle gibt einen String zurück, der den Wert einer angegebenen CSS-Eigenschaft enthält.
Die **CSSStyleDeclaration.getPropertyValue()** Methoden-Schnittstelle gibt einen String zurück, der den Wert einer angegebenen CSS-Eigenschaft enthält.

## Syntax

Expand All @@ -19,18 +19,18 @@ getPropertyValue(property)
### Parameter

- `property`
- : Ein String, der den Eigenschaftsnamen (in Bindestrich-Schreibweise) darstellt, der überprüft werden soll.
- : Ein String, der den Namen der Eigenschaft (in Bindestrich-Schreibweise) darstellt, die überprüft werden soll.

### Rückgabewert

Ein String, der den Wert der Eigenschaft enthält. Wenn nicht gesetzt, wird der leere String zurückgegeben.

Der Eigenschaftswert wird dynamisch berechnet, nicht so wie ursprünglich in der Deklaration angegeben. Die Serialisierung erfolgt wie folgt:
Der Eigenschaftswert wird dynamisch berechnet, nicht das ursprünglich in der Deklaration angegebene. Die Serialisierung erfolgt wie folgt:

- Wenn `property` eine Kurzschreibweise-Eigenschaft ist, dann holen Sie alle Langschreibweise-Eigenschaften, denen sie entspricht. Beachten Sie, dass Kurzschreibweise-Eigenschaften, die im ursprünglichen Stylesheet angegeben wurden, bereits während der Parsezeit erweitert wurden. Wenn mindestens eine dieser Langschreibweise-Eigenschaften nicht deklariert ist oder sich ihre `!important`-Status unterscheiden, dann ist das Ergebnis der leere String. Andernfalls wird ein Eigenschaftswert zurückgegeben, der sich auf die gleiche Liste von Langschreibweise-Eigenschaften erweitert, und dieser Kurzschreibweise-Wert wird so viele Komponenten wie möglich weglassen und in der formalen Definition in der kanonischen Reihenfolge neu anordnen, wenn möglich. Wenn eine der obigen syntaktischen Übersetzungen weniger abwärtskompatibel wäre, führen Sie sie nicht durch.
- Andernfalls wird die Eigenschaft gemäß ihrem Datentyp serialisiert. Jeder Datentyp hat eine kanonische Darstellung; zum Beispiel verwenden `<color>`-Werte immer `rgb(R, G, B)` oder `rgba(R, G, B, A)`.
- Wenn `property` eine Kurzschreibweise ist, dann alle Langschreibweisen abrufen, die dazu gehören. Beachten Sie, dass Kurzschreibweisen, die im ursprünglichen Stylesheet angegeben wurden, bereits zur Parse-Zeit expandiert wurden. Wenn mindestens eine dieser Langschreibweisen nicht erklärt ist oder ihre `!important`-Status unterschiedlich sind, wird das Ergebnis der leere String sein. Andernfalls wird ein Eigenschaftswert zurückgegeben, der sich in dieselbe Liste von Langschrift-Eigenschaftswerten erweitert. Dieser Kurzschriftwert wird so viele Komponenten wie möglich weglassen und, wenn möglich, in der kanonischen Reihenfolge der formellen Definition neu angeordnet. Wenn eine der obigen syntaktischen Übersetzungen weniger abwärtskompatibel wäre, führen Sie sie nicht durch.
- Andernfalls wird die Eigenschaft gemäß ihrem Datentyp serialisiert. Jeder Datentyp hat eine kanonische Darstellung; beispielsweise verwenden `<color>`-Werte immer `rgb(R, G, B)` oder `rgba(R, G, B, A)`.

Im Wesentlichen wird der Eigenschaftswert _kanonisiert_, um sicherzustellen, dass zwei Eigenschaftswerte mit demselben Rendering-Effekt gleich verglichen werden, auch wenn sie unterschiedlich deklariert sind.
Im Wesentlichen wird der Eigenschaftswert _kanonikalisiert_, um sicherzustellen, dass zwei Eigenschaftswerte mit demselben Rendering-Effekt gleich verglichen werden, selbst wenn sie unterschiedlich deklariert sind.

## Beispiele

Expand All @@ -41,7 +41,7 @@ const declaration = document.styleSheets[0].cssRules[0].style;
const value = declaration.getPropertyValue("margin"); // "1px 2px"
```

Der zurückgegebene String kann von dem in der Stil-Spezifikation des Elements angegebenen Wert abweichen. Beispielsweise wird dieser Stil:
Der zurückgegebene String kann von dem in der Stil-Spezifikation des Elements angegebenen Wert abweichen. Beispielsweise wird dieses Styling:

```html
<style>
Expand All @@ -55,7 +55,7 @@ Der zurückgegebene String kann von dem in der Stil-Spezifikation des Elements a
</script>
```

Einen Wert `rgb(51, 13, 242);` setzen. Dies ist wichtig beim Vergleich von Stilen durch Strings.
einen Wert `rgb(51, 13, 242);` setzen. Dies ist wichtig, wenn man Stile durch Strings vergleicht.

## Spezifikationen

Expand Down
22 changes: 11 additions & 11 deletions files/de/web/api/largestcontentfulpaint/rendertime/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ title: "LargestContentfulPaint: renderTime-Eigenschaft"
short-title: renderTime
slug: Web/API/LargestContentfulPaint/renderTime
l10n:
sourceCommit: 9070ad78e5933064ce6b67eed53a62d5cf0cec83
sourceCommit: 5d5f7a8f52ad9b21eb4b8f6dd9d0afce23d1bdf6
---

{{APIRef("Performance API")}}

Die schreibgeschützte Eigenschaft **`renderTime`** des [`LargestContentfulPaint`](/de/docs/Web/API/LargestContentfulPaint)-Interface repräsentiert die Zeit, zu der das Element auf dem Bildschirm gerendert wurde.
Die **`renderTime`**-Eigenschaft der [`LargestContentfulPaint`](/de/docs/Web/API/LargestContentfulPaint)-Schnittstelle repräsentiert die Zeit, zu der das Element auf dem Bildschirm gerendert wurde.

## Wert

Expand All @@ -19,9 +19,9 @@ Die `renderTime`-Eigenschaft kann die folgenden Werte haben:

## Beispiele

### Protokollierung der renderTime des größten inhaltsvollen Renderings
### Protokollierung der renderTime des größten inhaltsreichen Elements

Dieses Beispiel verwendet einen [`PerformanceObserver`](/de/docs/Web/API/PerformanceObserver), der über neue `largest-contentful-paint`-Leistungseinträge benachrichtigt, während sie in der Leistungstimeline des Browsers erfasst werden. Die `buffered`-Option wird verwendet, um auf Einträge von vor der Erstellung des Observers zuzugreifen.
Dieses Beispiel verwendet einen [`PerformanceObserver`](/de/docs/Web/API/PerformanceObserver), der über neue `largest-contentful-paint` Leistungsbeiträge benachrichtigt, wenn sie in der Leistungstimeline des Browsers aufgezeichnet werden. Die `buffered`-Option wird verwendet, um auf Einträge vor der Erstellung des Observers zuzugreifen.

```js
const observer = new PerformanceObserver((list) => {
Expand All @@ -32,23 +32,23 @@ const observer = new PerformanceObserver((list) => {
observer.observe({ type: "largest-contentful-paint", buffered: true });
```

### Renderzeit von Cross-Origin-Bildern
### Renderzeit für ein Cross-Origin-Bild

Aus Sicherheitsgründen war der Wert der [`renderTime`](/de/docs/Web/API/LargestContentfulPaint/renderTime)-Eigenschaft ursprünglich `0`, wenn die Ressource eine Cross-Origin-Anfrage ist. Stattdessen sollte die [`loadTime`](/de/docs/Web/API/LargestContentfulPaint/loadTime)-Eigenschaft als Fallback verwendet werden.
Aus Sicherheitsgründen war der Wert der [`renderTime`](/de/docs/Web/API/LargestContentfulPaint/renderTime)-Eigenschaft ursprünglich `0`, wenn die Ressource eine Cross-Origin-Anfrage war. Stattdessen sollte die [`loadTime`](/de/docs/Web/API/LargestContentfulPaint/loadTime)-Eigenschaft als Fallback verwendet werden.

Browser [könnten jetzt eine leicht grobkörnige Renderzeit offenlegen](https://github.com/w3c/paint-timing/issues/104) in diesen Situationen. Überprüfen Sie die [Browser-Unterstützung](#browser-kompatibilität).
Browser [könnten jetzt eine leicht grob gerasterte Renderzeit anzeigen](https://github.com/w3c/paint-timing/issues/104) in diesen Situationen. Prüfen Sie die [Browser-Kompatibilität](#browser-kompatibilität).

Um genauere Informationen zur Cross-Origin-Renderzeit offenzulegen, muss der {{HTTPHeader("Timing-Allow-Origin")}} HTTP-Antwort-Header gesetzt werden.
Um genauere Cross-Origin-Renderzeiten freizugeben, muss der {{HTTPHeader("Timing-Allow-Origin")}} HTTP-Antwort-Header gesetzt werden.

Um beispielsweise `https://developer.mozilla.org` eine genaue `renderTime` anzuzeigen, sollte die Cross-Origin-Ressource senden:
Zum Beispiel sollte die Cross-Origin-Ressource, um `https://developer.mozilla.org` eine genaue `renderTime` zu ermöglichen, senden:

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

Alternativ können Sie [`startTime`](/de/docs/Web/API/PerformanceEntry/startTime) verwenden, das den Wert der `renderTime` des Eintrags zurückgibt, wenn dieser nicht `0` ist, und andernfalls den Wert der [`loadTime`](/de/docs/Web/API/LargestContentfulPaint/loadTime) dieses Eintrags. Es wird jedoch empfohlen, den {{HTTPHeader("Timing-Allow-Origin")}} Header zu setzen, damit die Metriken genauer sind.
Alternativ können Sie [`startTime`](/de/docs/Web/API/PerformanceEntry/startTime) verwenden, die den Wert der `renderTime`-Eintragung zurückgibt, wenn diese nicht `0` ist, und andernfalls den Wert der [`loadTime`](/de/docs/Web/API/LargestContentfulPaint/loadTime) dieser Eintragung. Es wird jedoch empfohlen, den {{HTTPHeader("Timing-Allow-Origin")}} Header zu setzen, damit die Metriken genauer sind.

Wenn Sie `startTime` verwenden, können Sie Ungenauigkeiten markieren, indem Sie überprüfen, ob `renderTime` verwendet wurde:
Wenn Sie `startTime` verwenden, können Sie Ungenauigkeiten kennzeichnen, indem Sie überprüfen, ob `renderTime` verwendet wurde:

```js
const isAccurateLCP = entry.renderTime ? true : false;
Expand Down
Loading

0 comments on commit bbd04cc

Please sign in to comment.