chore(i18n): sync translations with latest source changes (chunk 1/1, 6 changes)

pull/1690/head
localizeflow[bot] 3 weeks ago
parent 65541e2034
commit f140bf635a

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T10:55:37+00:00",
"translation_date": "2026-02-06T13:44:57+00:00",
"source_file": "AGENTS.md",
"language_code": "de"
},

@ -2,36 +2,36 @@
## Projektübersicht
Dies ist ein Bildungs-Curriculum-Repository zum Erlernen der Grundlagen der Webentwicklung für Anfänger. Das Curriculum ist ein umfassender 12-Wochen-Kurs, der von Microsoft Cloud Advocates entwickelt wurde und 24 praktische Lektionen zu JavaScript, CSS und HTML umfasst.
Dies ist ein Bildungs-Curriculum-Repository zur Vermittlung von Grundlagen der Webentwicklung für Anfänger. Das Curriculum ist ein umfassender 12-Wochen-Kurs, der von Microsoft Cloud Advocates entwickelt wurde und 24 praxisorientierte Lektionen zu JavaScript, CSS und HTML enthält.
### Hauptkomponenten
- **Bildungsinhalt**: 24 strukturierte Lektionen, organisiert in projektbasierten Modulen
- **Praktische Projekte**: Terrarium, Tipp-Spiel, Browser-Erweiterung, Weltraumspiel, Banking-App, Code-Editor und KI-Chat-Assistent
- **Interaktive Quiz**: 48 Quiz mit jeweils 3 Fragen (Vor-/Nach-Lektionsbewertungen)
- **Mehrsprachige Unterstützung**: Automatisierte Übersetzungen für 50+ Sprachen via GitHub Actions
- **Interaktive Quizze**: 48 Quizze mit jeweils 3 Fragen (Vorher-/Nachher-Bewertungen der Lektionen)
- **Mehrsprachige Unterstützung**: Automatisierte Übersetzungen für über 50 Sprachen via GitHub Actions
- **Technologien**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (für KI-Projekte)
### Architektur
- Bildungsrepository mit lektionenbasierter Struktur
- Jeder Lektionenordner enthält README, Codebeispiele und Lösungen
- Eigenständige Projekte in separaten Verzeichnissen (quiz-app, verschiedene Lektionenprojekte)
- Übersetzungssystem mit GitHub Actions (co-op-translator)
- Dokumentation verfügbar via Docsify und als PDF
- Bildungs-Repository mit lektion-basierter Struktur
- Jeder Lektionen-Ordner enthält README, Codebeispiele und Lösungen
- Eigenständige Projekte in separaten Verzeichnissen (quiz-app, verschiedene Lektionen-Projekte)
- Übersetzungssystem mittels GitHub Actions (co-op-translator)
- Dokumentation bereitgestellt über Docsify und als PDF verfügbar
## Einrichtungskommandos
## Setup-Befehle
Dieses Repository ist in erster Linie für die Nutzung von Bildungsinhalten bestimmt. Für die Arbeit mit spezifischen Projekten:
Dieses Repository dient hauptsächlich zum Konsumieren von Bildungsinhalten. Für die Arbeit mit spezifischen Projekten:
### Hauptrepository Einrichtung
### Haupt-Repository-Setup
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz-App Einrichtung (Vue 3 + Vite)
### Quiz-App Setup (Vue 3 + Vite)
```bash
cd quiz-app
@ -41,7 +41,7 @@ npm run build # Für die Produktion bauen
npm run lint # ESLint ausführen
```
### Bank-Projekt API (Node.js + Express)
### Bank Projekt API (Node.js + Express)
```bash
cd 7-bank-project/api
@ -56,7 +56,7 @@ npm run format # Mit Prettier formatieren
```bash
cd 5-browser-extension/solution
npm install
# Befolgen Sie browserspezifische Anweisungen zum Laden von Erweiterungen
# Befolgen Sie die browserspezifischen Anweisungen zum Laden von Erweiterungen
```
### Weltraumspiel-Projekte
@ -64,7 +64,7 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Öffne index.html im Browser oder nutze Live Server
# Öffne index.html im Browser oder verwende Live Server
```
### Chat-Projekt (Python Backend)
@ -72,109 +72,109 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Setze die Umgebungsvariable GITHUB_TOKEN
# Setzen Sie die Umgebungsvariable GITHUB_TOKEN
python api.py
```
## Entwicklungsablauf
## Entwicklungs-Workflow
### Für Inhaltsbeiträge
### Für Inhalt-Beitragende
1. **Forke das Repository** in deinen GitHub-Account
2. **Klone deinen Fork** lokal
3. **Erstelle einen neuen Branch** für deine Änderungen
4. Ändere Inhalt der Lektionen oder Codebeispiele
5. Teste Änderungen an Code in den relevanten Projektverzeichnissen
6. Reiche Pull Requests ein gemäß den Beitragsrichtlinien
1. **Forken Sie das Repository** in Ihr GitHub-Konto
2. **Klonen Sie Ihren Fork** lokal
3. **Erstellen Sie einen neuen Branch** für Ihre Änderungen
4. Nehmen Sie Änderungen an Lektionen-Inhalt oder Codebeispielen vor
5. Testen Sie Codeänderungen in den entsprechenden Projektverzeichnissen
6. Reichen Sie Pull Requests entsprechend den Beitragsrichtlinien ein
### Für Lernende
1. Forke oder klone das Repository
2. Navigiere der Reihenfolge nach durch die Lektionenordner
3. Lese die README-Dateien jeder Lektion
4. Absolviere die Vor-Lektion-Quiz unter https://ff-quizzes.netlify.app/web/
5. Arbeite die Codebeispiele in den Lektionenordnern durch
6. Erledige Aufgaben und Herausforderungen
7. Absolviere die Nach-Lektion-Quiz
1. Forken oder klonen Sie das Repository
2. Navigieren Sie nacheinander durch die Lektionen-Verzeichnisse
3. Lesen Sie die README-Dateien für jede Lektion
4. Machen Sie die Vor-Lektion-Quizze unter https://ff-quizzes.netlify.app/web/
5. Arbeiten Sie die Codebeispiele in den Lektionen-Ordnern durch
6. Erledigen Sie Aufgaben und Herausforderungen
7. Absolvieren Sie die Nach-Lektion-Quizze
### Live-Entwicklung
- **Dokumentation**: Führe `docsify serve` im Root aus (Port 3000)
- **Quiz-App**: Starte `npm run dev` im quiz-app-Verzeichnis
- **Projekte**: Benutze VS Code Live Server Erweiterung für HTML-Projekte
- **API-Projekte**: Starte `npm start` in entsprechenden API-Verzeichnissen
- **Dokumentation**: `docsify serve` im Root ausführen (Port 3000)
- **Quiz-App**: `npm run dev` im quiz-app-Verzeichnis ausführen
- **Projekte**: Nutzen Sie die VS Code Live Server-Erweiterung für HTML-Projekte
- **API-Projekte**: `npm start` in den jeweiligen API-Verzeichnissen ausführen
## Testanweisungen
### Quiz-App Testing
### Quiz-App Tests
```bash
cd quiz-app
npm run lint # Überprüfen Sie auf Code-Stilprobleme
npm run build # Überprüfen Sie, ob der Build erfolgreich ist
npm run lint # Überprüfen auf Code-Stil-Probleme
npm run build # Überprüfen, ob der Build erfolgreich ist
```
### Bank-API Testing
### Bank API Tests
```bash
cd 7-bank-project/api
npm run lint # Überprüfen Sie auf Probleme im Code-Stil
node server.js # Überprüfen Sie, ob der Server ohne Fehler gestartet wird
npm run lint # Auf Code-Stilprobleme prüfen
node server.js # Überprüfen, ob der Server ohne Fehler startet
```
### Allgemeiner Testansatz
### Allgemeines Testverfahren
- Dies ist ein Bildungsrepository ohne umfassende automatisierte Tests
- Manuelle Tests konzentrieren sich auf:
- Codebeispiele laufen ohne Fehler
- Dies ist ein Bildungs-Repository ohne umfassende automatisierte Tests
- Manuelles Testen konzentriert sich auf:
- Codebeispiele laufen fehlerfrei
- Links in der Dokumentation funktionieren korrekt
- Projekte bauen erfolgreich
- Projekte bauen fehlerfrei
- Beispiele folgen Best Practices
### Vor dem Einreichen überprüfen
### Vor-Einreichungs-Checks
- Führe `npm run lint` in Verzeichnissen mit package.json aus
- Überprüfe Gültigkeit aller Markdown-Links
- Teste Codebeispiele im Browser oder Node.js
- Stelle sicher, dass Übersetzungen korrekt strukturiert sind
- Führen Sie `npm run lint` in Verzeichnissen mit package.json aus
- Überprüfen Sie, ob Markdown-Links gültig sind
- Testen Sie Codebeispiele im Browser oder Node.js
- Stellen Sie sicher, dass Übersetzungen die richtige Struktur behalten
## Code-Stil-Richtlinien
### JavaScript
- Verwende moderne ES6+ Syntax
- Folge Standard-ESLint-Konfigurationen der Projekte
- Verwende sinnvolle Variablen- und Funktionsnamen zur besseren Verständlichkeit
- Füge Kommentare hinzu, die Konzepte für Lernende erläutern
- Formatiere mit Prettier, wo konfiguriert
- Verwenden Sie moderne ES6+ Syntax
- Folgen Sie den Standard-ESLint-Konfigurationen in den Projekten
- Verwenden Sie aussagekräftige Variablen- und Funktionsnamen zur besseren Verständlichkeit
- Fügen Sie Kommentare hinzu, die Konzepte für Lernende erklären
- Formatieren Sie mit Prettier, wo konfiguriert
### HTML/CSS
- Semantische HTML5-Elemente
- Responsive Design Prinzipien
- Klare Klassennamen-Konventionen
- Responsive Design-Prinzipien
- Klare Klassennamenskonventionen
- Kommentare, die CSS-Techniken für Lernende erklären
### Python
- PEP 8 Stilrichtlinien
- Klare, pädagogische Codebeispiele
- Type Hints, wo nützlich für das Lernen
- Type Hints, wo sie beim Lernen hilfreich sind
### Markdown-Dokumentation
- Klare Überschriften-Hierarchie
- Codeblöcke mit Sprachangabe
- Links zu weiterführenden Ressourcen
- Klare Überschriftenhierarchie
- Codeblöcke mit Sprachspezifikation
- Links zu zusätzlichen Ressourcen
- Screenshots und Bilder in `images/` Verzeichnissen
- Alt-Texte für Bilder für Barrierefreiheit
- Alt-Text für Bilder zur Barrierefreiheit
### Dateiorganisation
### Datei-Organisation
- Lektionen fortlaufend nummeriert (1-getting-started-lessons, 2-js-basics, usw.)
- Jedes Projekt hat `solution/` und häufig `start/` oder `your-work/` Verzeichnisse
- Bilder in lektionenspezifischen `images/` Ordnern
- Übersetzungen in `translations/{language-code}/` Strukturen
- Lektionen nummeriert sequentiell (1-getting-started-lessons, 2-js-basics, etc.)
- Jedes Projekt hat `solution/` und oft `start/` oder `your-work/` Verzeichnisse
- Bilder gespeichert in lektion-spezifischen `images/` Ordnern
- Übersetzungen in `translations/{language-code}/` Struktur
## Build und Deployment
@ -185,41 +185,41 @@ Die quiz-app ist für Azure Static Web Apps Deployment konfiguriert:
```bash
cd quiz-app
npm run build # Erstellt den Ordner dist/
# Führt Bereitstellung über GitHub Actions Workflow bei Push zum main durch
# Führt bei Push zu main den GitHub Actions Workflow zur Bereitstellung aus
```
Azure Static Web Apps Konfiguration:
- **App-Location**: `/quiz-app`
- **Output-Location**: `dist`
- **App Location**: `/quiz-app`
- **Output Location**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Dokumentations-PDF-Erstellung
### Dokumentation PDF-Erstellung
```bash
npm install # Installiere docsify-to-pdf
npm run convert # PDF aus Docs generieren
npm run convert # Erzeuge PDF aus docs
```
### Docsify-Dokumentation
### Docsify Dokumentation
```bash
npm install -g docsify-cli # Installiere Docsify global
docsify serve # Bereitstellen auf localhost:3000
npm install -g docsify-cli # Docsify global installieren
docsify serve # Auf localhost:3000 bereitstellen
```
### Projektspezifische Builds
Jedes Projektverzeichnis kann einen eigenen Buildprozess haben:
- Vue-Projekte: `npm run build` erzeugt Produktionsbundles
- Statische Projekte: Kein Build-Schritt, Dateien werden direkt serviert
Jedes Projektverzeichnis kann einen eigenen Build-Prozess haben:
- Vue-Projekte: `npm run build` erstellt Produktions-Bundles
- Statische Projekte: Kein Build-Schritt, Dateien werden direkt ausgeliefert
## Pull Request Richtlinien
## Pull-Request-Richtlinien
### Titel-Format
Verwende klare, beschreibende Titel, die den Änderungsbereich angeben:
Verwenden Sie klare, beschreibende Titel, die den Änderungsbereich angeben:
- `[Quiz-app] Neue Quiz für Lektion X hinzufügen`
- `[Lesson-3] Rechtschreibfehler im Terrarium-Projekt beheben`
- `[Lesson-3] Tippfehler im Terrarium-Projekt korrigieren`
- `[Translation] Spanische Übersetzung für Lektion 5 hinzufügen`
- `[Docs] Setup-Anweisungen aktualisieren`
@ -228,51 +228,51 @@ Verwende klare, beschreibende Titel, die den Änderungsbereich angeben:
Vor dem Einreichen eines PR:
1. **Codequalität**:
- Führe `npm run lint` in betroffenen Projektverzeichnissen aus
- Behebe alle Linting-Fehler und -Warnungen
- `npm run lint` in betroffenen Projektordnern ausführen
- Alle Linting-Fehler und Warnungen beheben
2. **Build-Verifizierung**:
- Führe `npm run build` falls zutreffend aus
- Stelle sicher, dass keine Build-Fehler auftreten
2. **Build-Verifikation**:
- Falls zutreffend, `npm run build` ausführen
- Sicherstellen, dass keine Build-Fehler auftreten
3. **Link-Validierung**:
- Teste alle Markdown-Links
- Überprüfe Bildverweise auf Funktion
3. **Linkprüfung**:
- Alle Markdown-Links testen
- Bildreferenzen prüfen
4. **Inhaltsprüfung**:
- Korrekturlesen auf Rechtschreibung und Grammatik
- Sicherstellen, dass Codebeispiele korrekt und lehrreich sind
- Übersetzungen auf korrekte Bedeutung prüfen
- Sicherstellen, dass Codebeispiele korrekt und pädagogisch sinnvoll sind
- Übersetzungen auf Erhalt der ursprünglichen Bedeutung prüfen
### Beitragsanforderungen
- Zustimmung zur Microsoft CLA (automatischer Check beim ersten PR)
- Folge dem [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Siehe [CONTRIBUTING.md](./CONTRIBUTING.md) für ausführliche Richtlinien
- Verweise bei Bedarf auf Issue-Nummern in der PR-Beschreibung
- Zustimmung zur Microsoft CLA (automatische Prüfung beim ersten PR)
- Einhaltung des [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Siehe [CONTRIBUTING.md](./CONTRIBUTING.md) für detaillierte Richtlinien
- Verweise auf Issue-Nummern im PR-Beschreibungstext, falls zutreffend
### Review-Prozess
- PRs werden von Maintainers und Community geprüft
- Pädagogische Klarheit hat Priorität
- Priorität auf pädagogische Klarheit
- Codebeispiele sollten aktuellen Best Practices folgen
- Übersetzungen werden auf Genauigkeit und kulturelle Angemessenheit geprüft
- Übersetzungen auf Genauigkeit und kulturelle Angemessenheit geprüft
## Übersetzungssystem
### Automatisierte Übersetzung
- Verwendet GitHub Actions mit co-op-translator Workflow
- Übersetzt automatisch in 50+ Sprachen
- Übersetzt automatisch in über 50 Sprachen
- Quelldateien in Hauptverzeichnissen
- Übersetzte Dateien in `translations/{language-code}/` Verzeichnissen
### Manuelle Übersetzungsverbesserungen hinzufügen
### Manuelle Verbesserungen zu Übersetzungen hinzufügen
1. Datei in `translations/{language-code}/` aufrufen
2. Verbesserungen vornehmen, Struktur erhalten
3. Sicherstellen, dass Codebeispiele funktionsfähig bleiben
4. Lokalisierte Quizinhalte testen
1. Datei in `translations/{language-code}/` suchen
2. Verbesserungen vornehmen und Struktur bewahren
3. Sicherstellen, dass Codebeispiele weiterhin funktionieren
4. Lokalisierte Quiz-Inhalte testen
### Übersetzungs-Metadaten
@ -289,92 +289,92 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Debuggen und Fehlerbehebung
## Debugging und Fehlerbehebung
### Häufige Probleme
**Quiz-App startet nicht**:
- Node.js Version prüfen (v14+ empfohlen)
- `node_modules` und `package-lock.json` löschen, dann `npm install` erneut ausführen
- Prüfe Port-Konflikte (Standard: Vite nutzt Port 5173)
- `node_modules` und `package-lock.json` löschen, `npm install` erneut ausführen
- Port-Konflikte prüfen (Standard: Vite nutzt Port 5173)
**API Server startet nicht**:
- Stelle sicher, dass Node.js Version >= 10 ist
- Prüfe, ob Port schon belegt ist
- Alle Abhängigkeiten mit `npm install` installiert?
**API-Server startet nicht**:
- Node.js Mindestversion prüfen (node >=10)
- Prüfen, ob Port bereits belegt ist
- Alle Abhängigkeiten mit `npm install` installieren
**Browser-Erweiterung lädt nicht**:
- Manifest.json auf korrekte Formatierung prüfen
- Browser-Konsole auf Fehler untersuchen
- Browser-spezifische Installationsanweisungen beachten
- Browser-Konsole auf Fehler überprüfen
- Browser-spezifische Installationsanweisungen befolgen
**Probleme mit Python Chat-Projekt**:
- OpenAI-Paket installieren: `pip install openai`
**Probleme im Python-Chat-Projekt**:
- OpenAI-Package installiert? (`pip install openai`)
- GITHUB_TOKEN Umgebungsvariable gesetzt?
- Zugriffsrechte auf GitHub Models prüfen
- GitHub Models Zugriffsrechte prüfen
**Docsify liefert keine Docs aus**:
**Docsify liefert keine Dokumentation aus**:
- docsify-cli global installieren: `npm install -g docsify-cli`
- Im Root-Verzeichnis des Repositories ausführen
- Prüfe, ob `docs/_sidebar.md` existiert
- Vom Root-Verzeichnis des Repositories aus starten
- Prüfen, ob `docs/_sidebar.md` existiert
### Tipps zur Entwicklungsumgebung
- Verwende VS Code mit Live Server Erweiterung für HTML-Projekte
- Installiere ESLint und Prettier Extensions für einheitliches Formatieren
- Nutze Browser DevTools zum Debuggen von JavaScript
- Für Vue Projekte Vue DevTools Browser-Erweiterung installieren
- VS Code mit Live Server-Erweiterung für HTML-Projekte verwenden
- ESLint und Prettier Erweiterungen für konsistentes Formatieren installieren
- Browser DevTools zum Debuggen von JavaScript nutzen
- Für Vue-Projekte Vue DevTools Browser-Erweiterung installieren
### Performance Überlegungen
### Performance-Überlegungen
- Große Anzahl übersetzter Dateien (50+ Sprachen) macht vollständige Klone groß
- Verwende Shallow Clone, wenn nur Content bearbeitet wird: `git clone --depth 1`
- Übersetzungen bei Arbeit am englischen Content aus Suchergebnissen ausschließen
- Build-Prozesse können beim ersten Lauf langsam sein (npm install, Vite build)
- Große Anzahl an Übersetzungen (50+ Sprachen) führt zu großen vollständigen Klonen
- Für nur Content-Arbeit flachen Klon verwenden: `git clone --depth 1`
- Übersetzungen bei Arbeit an englischem Inhalt vom Suchindex ausschließen
- Build-Prozesse können beim ersten Durchlauf langsam sein (npm install, Vite Build)
## Sicherheitsüberlegungen
### Umgebungsvariablen
- API-Schlüssel dürfen niemals in das Repository committed werden
- Nutze `.env` Dateien (bereits in `.gitignore`)
- Dokumentiere benötigte Umgebungsvariablen in den README-Dateien der Projekte
- API-Schlüssel dürfen niemals im Repository gespeichert werden
- `.env` Dateien verwenden (bereits in `.gitignore`)
- Erforderliche Umgebungsvariablen in Projekt-READMEs dokumentieren
### Python Projekte
### Python-Projekte
- Virtuelle Umgebungen verwenden: `python -m venv venv`
- Abhängigkeiten aktuell halten
- GitHub Tokens mit minimalen erforderlichen Rechten nutzen
- GitHub-Tokens sollten minimal notwendige Berechtigungen haben
### GitHub Models Zugriff
- Persönliche Zugangstoken (PAT) für GitHub Models erforderlich
- Personal Access Tokens (PAT) werden für GitHub Models benötigt
- Tokens als Umgebungsvariablen speichern
- Tokens oder Zugangsdaten niemals commiten
- Tokens oder Anmeldedaten niemals committen
## Weitere Hinweise
## Zusätzliche Hinweise
### Zielgruppe
- Absolute Anfänger in der Webentwicklung
- Vollständige Anfänger in Webentwicklung
- Schüler und Selbstlernende
- Lehrer, die das Curriculum im Unterricht einsetzen
- Inhalte sind barrierefrei und bauen Fähigkeiten schrittweise auf
- Lehrer, die das Curriculum im Unterricht verwenden
- Inhalte sind barrierefrei und für schrittweise Kompetenzentwicklung ausgelegt
### Pädagogische Philosophie
- Projektbasiertes Lernen
- Häufige Wissensabfragen (Quiz)
- Praktische Programmierübungen
- Praxisnahe Beispiele
- Häufige Wissensabfragen (Quizze)
- Praxisnahe Codierübungen
- Praxisbeispiele aus der Realität
- Fokus auf Grundlagen vor Frameworks
### Repository-Wartung
- Aktive Community aus Lernenden und Beitragsleistenden
- Regelmäßige Updates von Abhängigkeiten und Inhalten
- Issues und Diskussionen werden von Maintainers betreut
- Übersetzungsaktualisierungen automatisiert via GitHub Actions
- Aktive Community von Lernenden und Beitragenden
- Regelmäßige Updates zu Abhängigkeiten und Inhalten
- Überwachung von Issues und Diskussionen durch Maintainer
- Automatisierte Übersetzungs-Updates via GitHub Actions
### Verwandte Ressourcen
@ -385,24 +385,24 @@ CO_OP_TRANSLATOR_METADATA:
### Arbeit mit spezifischen Projekten
Detaillierte Anweisungen zu einzelnen Projekten in den README-Dateien:
Für detaillierte Anweisungen zu einzelnen Projekten siehe die README-Dateien in:
- `quiz-app/README.md` - Vue 3 Quiz-Anwendung
- `7-bank-project/README.md` - Banking-Anwendung mit Authentifizierung
- `5-browser-extension/README.md` - Entwicklung von Browser-Erweiterungen
- `6-space-game/README.md` - Canvas-basiertes Weltraumspiel
- `9-chat-project/README.md` - KI-Chat-Assistent Projekt
- `6-space-game/README.md` - Entwicklung eines Canvas-basierten Spiels
- `9-chat-project/README.md` - KI Chat-Assistent Projekt
### Monorepo-Struktur
Obwohl kein traditionelles Monorepo, enthält dieses Repository mehrere unabhängige Projekte:
Obwohl kein klassisches Monorepo, enthält dieses Repository mehrere unabhängige Projekte:
- Jede Lektion ist eigenständig
- Projekte teilen keine Abhängigkeiten
- Arbeit an einzelnen Projekten ohne Einfluss auf andere möglich
- Komplettes Repo klonen für das vollständige Curriculum-Erlebnis
- Arbeiten Sie an einzelnen Projekten, ohne andere zu beeinflussen
- Klonen Sie das gesamte Repository für das volle Curriculum-Erlebnis
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Haftungsausschluss**:
Dieses Dokument wurde mithilfe des KI-Übersetzungsdienstes [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir auf Genauigkeit achten, sollten Sie beachten, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache ist als maßgebliche Quelle zu betrachten. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die durch die Nutzung dieser Übersetzung entstehen.
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Originalsprache ist als maßgebliche Quelle zu betrachten. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die durch die Nutzung dieser Übersetzung entstehen.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T10:54:30+00:00",
"translation_date": "2026-02-06T13:43:53+00:00",
"source_file": "AGENTS.md",
"language_code": "es"
},

@ -2,27 +2,27 @@
## Descripción del Proyecto
Este es un repositorio curricular educativo para enseñar fundamentos de desarrollo web a principiantes. El currículo es un curso integral de 12 semanas desarrollado por Microsoft Cloud Advocates, que incluye 24 lecciones prácticas que cubren JavaScript, CSS y HTML.
Este es un repositorio educativo para enseñar fundamentos de desarrollo web a principiantes. El currículo es un curso integral de 12 semanas desarrollado por Microsoft Cloud Advocates, que incluye 24 lecciones prácticas sobre JavaScript, CSS y HTML.
### Componentes Clave
- **Contenido Educativo**: 24 lecciones estructuradas organizadas en módulos basados en proyectos
- **Proyectos Prácticos**: Terrarium, Juego de Escritura, Extensión de Navegador, Juego Espacial, Aplicación Bancaria, Editor de Código y Asistente de Chat AI
- **Cuestionarios Interactivos**: 48 cuestionarios con 3 preguntas cada uno (evaluaciones pre/post-lección)
- **Soporte Multilenguaje**: Traducciones automáticas a más de 50 idiomas mediante GitHub Actions
- **Tecnologías**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para proyectos de IA)
- **Contenido Educativo**: 24 lecciones estructuradas organizadas en módulos basados en proyectos
- **Proyectos Prácticos**: Terrarium, Juego de mecanografía, Extensión de navegador, Juego espacial, Aplicación bancaria, Editor de código y Asistente de chat AI
- **Cuestionarios Interactivos**: 48 cuestionarios con 3 preguntas cada uno (evaluaciones antes/después de las lecciones)
- **Soporte Multilenguaje**: Traducciones automáticas para más de 50 idiomas mediante GitHub Actions
- **Tecnologías**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para proyectos AI)
### Arquitectura
- Repositorio educativo con estructura basada en lecciones
- Cada carpeta de lección contiene README, ejemplos de código y soluciones
- Proyectos independientes en directorios separados (quiz-app, varios proyectos de lección)
- Sistema de traducción usando GitHub Actions (co-op-translator)
- Repositorio educativo con estructura basada en lecciones
- Cada carpeta de lección contiene README, ejemplos de código y soluciones
- Proyectos independientes en directorios separados (quiz-app, varios proyectos de lecciones)
- Sistema de traducción usando GitHub Actions (co-op-translator)
- Documentación servida vía Docsify y disponible en PDF
## Comandos de Configuración
Este repositorio es principalmente para consumo de contenido educativo. Para trabajar con proyectos específicos:
Este repositorio es principalmente para consumir contenido educativo. Para trabajar con proyectos específicos:
### Configuración Principal del Repositorio
@ -46,7 +46,7 @@ npm run lint # Ejecutar ESLint
```bash
cd 7-bank-project/api
npm install
npm start # Iniciar el servidor API
npm start # Iniciar servidor API
npm run lint # Ejecutar ESLint
npm run format # Formatear con Prettier
```
@ -56,10 +56,10 @@ npm run format # Formatear con Prettier
```bash
cd 5-browser-extension/solution
npm install
# Siga las instrucciones específicas del navegador para cargar la extensión
# Siga las instrucciones específicas del navegador para cargar extensiones
```
### Proyectos de Juego Espacial
### Proyectos del Juego Espacial
```bash
cd 6-space-game/solution
@ -80,101 +80,101 @@ python api.py
### Para Contribuidores de Contenido
1. **Haz fork del repositorio** a tu cuenta de GitHub
2. **Clona tu fork** localmente
3. **Crea una nueva rama** para tus cambios
4. Realiza cambios en el contenido de las lecciones o ejemplos de código
5. Prueba cualquier cambio de código en los directorios de proyectos relevantes
6. Envía pull requests siguiendo las directrices de contribución
1. **Haz fork del repositorio** a tu cuenta de GitHub
2. **Clona tu fork** localmente
3. **Crea una nueva rama** para tus cambios
4. Realiza cambios en el contenido de las lecciones o ejemplos de código
5. Prueba cualquier cambio de código en los directorios de proyecto correspondientes
6. Envía pull requests siguiendo las directrices de contribución
### Para Estudiantes
1. Haz fork o clona el repositorio
2. Navega secuencialmente por los directorios de las lecciones
3. Lee los archivos README de cada lección
4. Completa los cuestionarios previos en https://ff-quizzes.netlify.app/web/
5. Trabaja con los ejemplos de código en las carpetas de lección
6. Realiza tareas y desafíos
7. Realiza los cuestionarios posteriores a la lección
1. Haz fork o clona el repositorio
2. Navega por los directorios de lecciones secuencialmente
3. Lee los archivos README de cada lección
4. Completa los cuestionarios previos en https://ff-quizzes.netlify.app/web/
5. Trabaja con los ejemplos de código en las carpetas de las lecciones
6. Cumple con tareas y desafíos
7. Realiza los cuestionarios posteriores a las lecciones
### Desarrollo en Vivo
- **Documentación**: Ejecuta `docsify serve` en la raíz (puerto 3000)
- **Quiz App**: Ejecuta `npm run dev` en el directorio quiz-app
- **Proyectos**: Usa la extensión Live Server de VS Code para proyectos HTML
- **Documentación**: Ejecuta `docsify serve` en la raíz (puerto 3000)
- **Quiz App**: Ejecuta `npm run dev` dentro del directorio quiz-app
- **Proyectos**: Usa la extensión Live Server de VS Code para proyectos HTML
- **Proyectos API**: Ejecuta `npm start` en los directorios API respectivos
## Instrucciones de Pruebas
## Instrucciones de Prueba
### Pruebas de Quiz App
```bash
cd quiz-app
npm run lint # Verificar problemas de estilo de código
npm run build # Verificar que la compilación tenga éxito
npm run build # Verificar que la compilación sea exitosa
```
### Pruebas de la API Bancaria
### Pruebas de API Bancaria
```bash
cd 7-bank-project/api
npm run lint # Verificar problemas de estilo de código
node server.js # Verificar que el servidor se inicie sin errores
node server.js # Verificar que el servidor inicie sin errores
```
### Enfoque General de Pruebas
- Este es un repositorio educativo sin pruebas automatizadas exhaustivas
- Las pruebas manuales se centran en:
- Ejecución sin errores de ejemplos de código
- Funcionamiento correcto de enlaces en la documentación
- Correcto armado de proyectos
- Los ejemplos siguen buenas prácticas
- Este es un repositorio educativo sin pruebas automatizadas exhaustivas
- Pruebas manuales enfocadas en:
- Ejecución sin errores de los ejemplos de código
- Funcionamiento correcto de enlaces en la documentación
- Construcción exitosa de los proyectos
- Ejemplos que siguen buenas prácticas
### Verificaciones Previas a Enviar PR
### Verificaciones Previas al Envío
- Ejecuta `npm run lint` en directorios con package.json
- Verifica que los enlaces markdown sean válidos
- Prueba ejemplos de código en navegador o Node.js
- Comprueba que las traducciones mantienen la estructura correcta
- Ejecuta `npm run lint` en directorios con package.json
- Verifica que los enlaces markdown sean válidos
- Prueba los ejemplos de código en navegador o Node.js
- Asegura que las traducciones mantienen la estructura adecuada
## Guías de Estilo de Código
### JavaScript
- Usar sintaxis moderna ES6+
- Seguir las configuraciones estándar de ESLint proporcionadas en los proyectos
- Usar nombres significativos para variables y funciones para claridad educativa
- Agregar comentarios explicativos para los conceptos
- Formatear con Prettier donde esté configurado
- Usa sintaxis moderna ES6+
- Sigue configuraciones estándar de ESLint providas en los proyectos
- Usa nombres significativos para variables y funciones para claridad educativa
- Añade comentarios que expliquen conceptos para los estudiantes
- Formatea con Prettier donde esté configurado
### HTML/CSS
- Elementos semánticos HTML5
- Principios de diseño responsive
- Convenciones claras para nombres de clases
- Elementos semánticos HTML5
- Principios de diseño responsivo
- Convenciones claras para nombres de clases
- Comentarios que expliquen técnicas CSS para estudiantes
### Python
- Directrices de estilo PEP 8
- Ejemplos de código claros y educativos
- Anotaciones de tipo donde sean útiles para el aprendizaje
- Guías de estilo PEP 8
- Ejemplos claros y educativos
- Usar anotaciones de tipo donde ayuden en el aprendizaje
### Documentación Markdown
- Jerarquía clara de encabezados
- Bloques de código con especificación de lenguaje
- Enlaces a recursos adicionales
- Capturas y imágenes en directorios `images/`
- Texto alternativo para imágenes accesibles
- Jerarquía clara de encabezados
- Bloques de código con especificación de lenguaje
- Enlaces a recursos adicionales
- Capturas de pantalla e imágenes en directorios `images/`
- Texto alternativo para imágenes para accesibilidad
### Organización de Archivos
- Lecciones numeradas secuencialmente (1-getting-started-lessons, 2-js-basics, etc.)
- Cada proyecto tiene directorios `solution/` y a menudo `start/` o `your-work/`
- Imágenes almacenadas en carpetas `images/` específicas por lección
- Traducciones en estructura `translations/{language-code}/`
- Lecciones numeradas secuencialmente (1-getting-started-lessons, 2-js-basics, etc.)
- Cada proyecto tiene directorios `solution/` y frecuentemente `start/` o `your-work/`
- Imágenes almacenadas en carpetas `images/` específicas de cada lección
- Traducciones en estructura `translations/{código-idioma}/`
## Construcción y Despliegue
@ -185,98 +185,98 @@ La quiz-app está configurada para despliegue en Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Crea la carpeta dist/
# Despliega a través del flujo de trabajo de GitHub Actions al hacer push en main
# Despliega mediante el flujo de trabajo de GitHub Actions al hacer push a main
```
Configuración de Azure Static Web Apps:
- **Ubicación de la app**: `/quiz-app`
- **Ubicación de salida**: `dist`
- **Flujo de trabajo**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Configuración de Azure Static Web Apps:
- **Ubicación de la app**: `/quiz-app`
- **Ubicación de salida**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generación de PDF de Documentación
### Generación PDF de Documentación
```bash
npm install # Instalar docsify-to-pdf
npm run convert # Generar PDF desde docs
npm run convert # Generar PDF a partir de docs
```
### Documentación Docsify
### Documentación con Docsify
```bash
npm install -g docsify-cli # Instalar Docsify globalmente
docsify serve # Servir en localhost:3000
```
### Construcciones Específicas de Proyectos
### Construcciones específicas por proyecto
Cada directorio de proyecto puede tener su propio proceso de construcción:
- Proyectos Vue: `npm run build` crea paquetes de producción
- Proyectos estáticos: sin paso de construcción, sirven archivos directamente
Cada directorio de proyecto puede tener su propio proceso de construcción:
- Proyectos Vue: `npm run build` crea bundles de producción
- Proyectos estáticos: no hay paso de construcción, sirven archivos directamente
## Guías para Pull Requests
## Directrices para Pull Requests
### Formato del Título
Usa títulos claros y descriptivos indicando el área de cambio:
- `[Quiz-app] Agrega nuevo cuestionario para la lección X`
- `[Lesson-3] Corrige errata en proyecto terrarium`
- `[Translation] Añade traducción al español para lección 5`
- `[Docs] Actualiza instrucciones de configuración`
Usa títulos claros y descriptivos que indiquen el área del cambio:
- `[Quiz-app] Añadir nuevo cuestionario para la lección X`
- `[Lesson-3] Corregir error tipográfico en proyecto terrarium`
- `[Translation] Añadir traducción al español para lección 5`
- `[Docs] Actualizar instrucciones de configuración`
### Verificaciones Requeridas
### Comprobaciones Requeridas
Antes de enviar un PR:
1. **Calidad de Código**:
- Ejecuta `npm run lint` en los directorios afectados
- Corrige todos los errores y advertencias de lint
1. **Calidad de Código**:
- Ejecuta `npm run lint` en directorios de proyectos afectados
- Corrige todos errores y advertencias de linting
2. **Verificación de Construcción**:
- Ejecuta `npm run build` si aplica
- Asegura que no haya errores de construcción
2. **Verificación de Construcción**:
- Ejecuta `npm run build` si aplica
- Asegura que no haya errores en la construcción
3. **Validación de Enlaces**:
- Prueba todos los enlaces markdown
- Verifica que las referencias de imágenes funcionen
3. **Validación de Enlaces**:
- Prueba todos los enlaces markdown
- Verifica referencias a imágenes
4. **Revisión de Contenido**:
- Revisa ortografía y gramática
- Asegura que los ejemplos de código sean correctos y educativos
- Verifica que las traducciones mantengan el significado original
4. **Revisión de Contenido**:
- Revisa ortografía y gramática
- Asegura que los ejemplos de código sean correctos y educativos
- Verifica que traducciones mantengan el significado original
### Requisitos para Contribuir
- Aceptar la CLA de Microsoft (verificación automática en el primer PR)
- Seguir el [Código de Conducta de Código Abierto de Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Consultar [CONTRIBUTING.md](./CONTRIBUTING.md) para directrices detalladas
- Referenciar números de issues en la descripción del PR si aplicable
- Aceptar el CLA de Microsoft (verificación automática en el primer PR)
- Seguir el [Código de Conducta de Código Abierto de Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Ver [CONTRIBUTING.md](./CONTRIBUTING.md) para directrices detalladas
- Referenciar números de issues en la descripción del PR si aplica
### Proceso de Revisión
- PRs revisados por mantenedores y comunidad
- Se prioriza la claridad educativa
- Los ejemplos de código deben seguir mejores prácticas actuales
- Traducciones revisadas para precisión y adecuación cultural
- PRs son revisados por mantenedores y la comunidad
- Se prioriza claridad educativa
- Los ejemplos de código deben seguir las mejores prácticas actuales
- Las traducciones se revisan por precisión y adecuación cultural
## Sistema de Traducción
### Traducción Automática
### Traducción Automatizada
- Usa GitHub Actions con workflow co-op-translator
- Traduce automáticamente a más de 50 idiomas
- Archivos fuente en directorios principales
- Archivos traducidos en directorios `translations/{language-code}/`
- Usa GitHub Actions con workflow co-op-translator
- Traduce automáticamente a más de 50 idiomas
- Archivos fuente en directorios principales
- Archivos traducidos en directorios `translations/{código-idioma}/`
### Añadiendo Mejoras Manuales de Traducción
### Añadir Mejoras Manuales de Traducción
1. Localiza el archivo en `translations/{language-code}/`
2. Realiza mejoras preservando la estructura
3. Asegura que los ejemplos de código sigan funcionando
4. Prueba cualquier contenido de cuestionarios localizado
1. Localiza el archivo en `translations/{código-idioma}/`
2. Realiza mejoras preservando la estructura
3. Asegura que los ejemplos de código sigan funcionando
4. Prueba cualquier contenido localizado en los cuestionarios
### Metadatos de Traducción
Los archivos traducidos incluyen encabezado de metadatos:
Los archivos traducidos incluyen encabezado de metadatos:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Depuración y Resolución de Problemas
## Depuración y Solución de Problemas
### Problemas Comunes
**No inicia la app de quiz**:
- Verifica la versión de Node.js (recomendado v14+)
- Elimina `node_modules` y `package-lock.json`, ejecuta `npm install` nuevamente
- Revisa conflictos de puerto (por defecto: Vite usa el puerto 5173)
**La aplicación del cuestionario no inicia**:
- Verificar versión de Node.js (se recomienda v14+)
- Eliminar `node_modules` y `package-lock.json`, ejecutar `npm install` nuevamente
- Comprobar conflictos de puerto (por defecto: Vite usa puerto 5173)
**El servidor API no inicia**:
- Verifica que la versión de Node.js sea mínima (node >=10)
- Revisa si el puerto ya está en uso
- Asegura que todas las dependencias estén instaladas con `npm install`
**El servidor API no inicia**:
- Verificar que la versión de Node.js cumpla el mínimo (node >=10)
- Verificar si el puerto ya está en uso
- Asegurar que todas las dependencias estén instaladas con `npm install`
**La extensión de navegador no carga**:
- Verifica que manifest.json esté bien formateado
- Revisa en la consola del navegador por errores
- Sigue las instrucciones específicas para instalación de extensiones en el navegador
**La extensión del navegador no carga**:
- Verificar que `manifest.json` esté correctamente formateado
- Revisar la consola del navegador para errores
- Seguir instrucciones específicas de instalación para la extensión en el navegador
**Problemas con proyecto de chat en Python**:
- Asegura que el paquete OpenAI esté instalado: `pip install openai`
- Verifica que la variable de entorno GITHUB_TOKEN esté configurada
- Comprueba permisos de acceso a GitHub Models
**Problemas con el proyecto de chat en Python**:
- Asegurarse de tener instalado el paquete OpenAI: `pip install openai`
- Verificar que la variable de entorno GITHUB_TOKEN esté configurada
- Comprobar permisos de acceso a modelos GitHub
**Docsify no sirve la documentación**:
- Instala docsify-cli globalmente: `npm install -g docsify-cli`
- Ejecuta desde el directorio raíz del repositorio
- Verifica que `docs/_sidebar.md` exista
**Docsify no sirve la documentación**:
- Instalar docsify-cli globalmente: `npm install -g docsify-cli`
- Ejecutar desde el directorio raíz del repositorio
- Verificar que `docs/_sidebar.md` exista
### Consejos para el Entorno de Desarrollo
- Usa VS Code con la extensión Live Server para proyectos HTML
- Instala extensiones ESLint y Prettier para formato consistente
- Utiliza DevTools en navegador para depurar JavaScript
- Para proyectos Vue, instala extensión Vue DevTools para navegador
- Usar VS Code con la extensión Live Server para proyectos HTML
- Instalar extensiones ESLint y Prettier para formateo consistente
- Usar DevTools del navegador para depurar JavaScript
- Para proyectos Vue, instalar la extensión Vue DevTools en el navegador
### Consideraciones de Rendimiento
- Gran número de archivos traducidos (50+ idiomas) implica clones completos grandes
- Usa clonación superficial si solo trabajas con contenido: `git clone --depth 1`
- Excluye traducciones de búsquedas cuando trabajes en contenido en inglés
- Gran número de archivos traducidos (más de 50 idiomas) implica clones completos grandes
- Usar clonación superficial si solo se trabaja con contenido: `git clone --depth 1`
- Excluir traducciones de búsquedas cuando se trabaja en contenido en inglés
- Los procesos de construcción pueden ser lentos en la primera ejecución (npm install, construcción Vite)
## Consideraciones de Seguridad
### Variables de Entorno
- Las claves API nunca deben ser comprometidas en el repositorio
- Usa archivos `.env` (ya incluidos en `.gitignore`)
- Documenta las variables de entorno necesarias en los READMEs del proyecto
- Las claves API nunca deben subirse al repositorio
- Usar archivos `.env` (ya incluidos en `.gitignore`)
- Documentar variables de entorno requeridas en los README de proyectos
### Proyectos Python
### Proyectos en Python
- Usa entornos virtuales: `python -m venv venv`
- Mantén las dependencias actualizadas
- Los tokens de GitHub deben tener permisos mínimos requeridos
- Usar entornos virtuales: `python -m venv venv`
- Mantener dependencias actualizadas
- Los tokens de GitHub deben tener permisos mínimos necesarios
### Acceso a GitHub Models
### Acceso a Modelos de GitHub
- Se requieren Tokens de Acceso Personal (PAT) para GitHub Models
- Los tokens deben ser almacenados como variables de entorno
- Nunca comprometas tokens o credenciales
- Se requieren Tokens de Acceso Personal (PAT) para modelos de GitHub
- Los tokens deben guardarse como variables de entorno
- Nunca subir tokens o credenciales al repositorio
## Notas Adicionales
### Audiencia Objetivo
- Principiantes completos en desarrollo web
- Estudiantes y autoaprendices
- Docentes usando el currículo en aulas
- Contenido diseñado para accesibilidad y desarrollo gradual de habilidades
- Principiantes completos en desarrollo web
- Estudiantes y autodidactas
- Profesores que usan el currículo en aulas
- Contenido diseñado para accesibilidad y construcción gradual de habilidades
### Filosofía Educativa
- Aprendizaje basado en proyectos
- Revisiones frecuentes de conocimiento (cuestionarios)
- Ejercicios prácticos de codificación
- Ejemplos aplicados del mundo real
- Enfoque en fundamentos antes que frameworks
- Enfoque basado en proyectos
- Controles frecuentes de conocimiento (cuestionarios)
- Ejercicios prácticos de codificación
- Ejemplos de aplicación en el mundo real
- Enfasis en fundamentos antes que en frameworks
### Mantenimiento del Repositorio
- Comunidad activa de aprendices y colaboradores
- Actualizaciones regulares de dependencias y contenido
- Issues y discusiones monitoreadas por mantenedores
- Actualizaciones de traducción automatizadas vía GitHub Actions
- Comunidad activa de estudiantes y colaboradores
- Actualizaciones regulares de dependencias y contenido
- Issues y discusiones monitorizadas por mantenedores
- Actualizaciones automáticas de traducción vía GitHub Actions
### Recursos Relacionados
- [Microsoft Learn módulos](https://docs.microsoft.com/learn/)
- [Recursos Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para estudiantes
- Cursos adicionales: AI generativa, ciencia de datos, ML, IoT disponibles
- [Módulos Microsoft Learn](https://docs.microsoft.com/learn/)
- [Recursos del Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para estudiantes
- Cursos adicionales: IA generativa, Ciencia de datos, ML, currículos IoT disponibles
### Trabajando con Proyectos Específicos
### Trabajo con Proyectos Específicos
Para instrucciones detalladas sobre proyectos individuales, consulta los archivos README en:
- `quiz-app/README.md` - Aplicación de quiz en Vue 3
- `7-bank-project/README.md` - Aplicación bancaria con autenticación
- `5-browser-extension/README.md` - Desarrollo de extensión para navegador
- `6-space-game/README.md` - Desarrollo de juego basado en canvas
Para instrucciones detalladas sobre proyectos individuales, consulte los archivos README en:
- `quiz-app/README.md` - Aplicación de cuestionarios Vue 3
- `7-bank-project/README.md` - Aplicación bancaria con autenticación
- `5-browser-extension/README.md` - Desarrollo de extensiones de navegador
- `6-space-game/README.md` - Desarrollo de juego con canvas
- `9-chat-project/README.md` - Proyecto asistente de chat AI
### Estructura del Monorepo
### Estructura Monorepo
Aunque no es un monorepo tradicional, este repositorio contiene múltiples proyectos independientes:
- Cada lección es autónoma
- Los proyectos no comparten dependencias
- Trabaja en proyectos individuales sin afectar otros
- Clona todo el repositorio para obtener la experiencia completa del currículo
Aunque no es un monorepo tradicional, este repositorio contiene múltiples proyectos independientes:
- Cada lección es autónoma
- Los proyectos no comparten dependencias
- Se puede trabajar en proyectos individuales sin afectar a otros
- Clonar el repositorio completo para la experiencia de currículo completa
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o inexactitudes. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda la traducción profesional humana. No nos hacemos responsables de cualquier malentendido o interpretación errónea derivada del uso de esta traducción.
**Aviso legal**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por la precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o inexactitudes. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos responsabilizamos por malentendidos o interpretaciones erróneas derivadas del uso de esta traducción.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T10:53:21+00:00",
"translation_date": "2026-02-06T13:41:49+00:00",
"source_file": "AGENTS.md",
"language_code": "fr"
},

@ -1,37 +1,37 @@
# AGENTS.md
## Présentation du projet
## Aperçu du projet
Il s'agit d'un référentiel de programme éducatif pour enseigner les fondamentaux du développement web aux débutants. Le programme est un cours complet de 12 semaines développé par Microsoft Cloud Advocates, comprenant 24 leçons pratiques couvrant JavaScript, CSS et HTML.
Ceci est un dépôt de programme éducatif pour l'enseignement des fondamentaux du développement web aux débutants. Le programme est un cours complet de 12 semaines développé par les Cloud Advocates de Microsoft, comprenant 24 leçons pratiques couvrant JavaScript, CSS et HTML.
### Composants clés
- **Contenu éducatif** : 24 leçons structurées organisées en modules basés sur des projets
- **Projets pratiques** : Terrarium, Jeu de frappe, Extension de navigateur, Jeu spatial, Application bancaire, Éditeur de code, et Assistant de chat IA
- **Quiz interactifs** : 48 quiz avec 3 questions chacun (évaluations avant/après les leçons)
- **Support multilingue** : Traductions automaties pour plus de 50 langues via GitHub Actions
- **Technologies** : HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (pour les projets IA)
- **Projets pratiques** : Terrarium, Jeu de frappe, Extension de navigateur, Jeu spatial, Application bancaire, Éditeur de code et Assistant de chat AI
- **Quiz interactifs** : 48 quiz avec 3 questions chacun (évaluations pré/post-lesson)
- **Support multilingue** : Traductions automatiques pour plus de 50 langues via GitHub Actions
- **Technologies** : HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (pour les projets AI)
### Architecture
- Référentiel éducatif avec structure basée sur les leçons
- Chaque dossier de leçon contient un README, des exemples de code, et des solutions
- Projets indépendants dans des répertoires séparés (quiz-app, divers projets de leçons)
- Dépôt éducatif avec structure basée sur les leçons
- Chaque dossier de leçon contient README, exemples de code et solutions
- Projets autonomes dans des répertoires séparés (quiz-app, divers projets de leçons)
- Système de traduction utilisant GitHub Actions (co-op-translator)
- Documentation servie via Docsify et disponible en PDF
## Commandes d'installation
Ce référentiel est principalement destiné à la consommation de contenu éducatif. Pour travailler avec des projets spécifiques :
Ce dépôt est principalement destiné à la consommation de contenu éducatif. Pour travailler avec des projets spécifiques :
### Installation du référentiel principal
### Installation du dépôt principal
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Installation de lapplication Quiz (Vue 3 + Vite)
### Installation de Quiz App (Vue 3 + Vite)
```bash
cd quiz-app
@ -51,20 +51,20 @@ npm run lint # Exécuter ESLint
npm run format # Formater avec Prettier
```
### Projets dextension de navigateur
### Projets d'extensions de navigateur
```bash
cd 5-browser-extension/solution
npm install
# Suivez les instructions spécifiques au navigateur pour le chargement des extensions
# Suivez les instructions spécifiques au navigateur pour le chargement de l'extension
```
### Projets de jeu spatial
### Projets de jeux spatiaux
```bash
cd 6-space-game/solution
npm install
# Ouvrez index.html dans un navigateur ou utilisez Live Server
# Ouvrez index.html dans le navigateur ou utilisez Live Server
```
### Projet de chat (Backend Python)
@ -80,22 +80,22 @@ python api.py
### Pour les contributeurs de contenu
1. **Forkez le référentiel** sur votre compte GitHub
2. **Cloner votre fork** localement
1. **Forkez le dépôt** sur votre compte GitHub
2. **Clonez votre fork** localement
3. **Créez une nouvelle branche** pour vos modifications
4. Apportez des modifications au contenu des leçons ou aux exemples de code
5. Testez les changements de code dans les répertoires de projets concernés
6. Soumettez des pull requests en suivant les directives de contribution
4. Modifiez le contenu des leçons ou les exemples de code
5. Testez toutes les modifications de code dans les répertoires de projets concernés
6. Soumettez des pull requests en suivant les consignes de contribution
### Pour les apprenants
1. Forkez ou clonez le référentiel
2. Naviguez dans les répertoires des leçons dans lordre
3. Lisez les fichiers README pour chaque leçon
4. Complétez les quiz pré-leçon sur https://ff-quizzes.netlify.app/web/
5. Travaillez sur les exemples de code dans les dossiers de leçon
6. Réalisez les devoirs et défis
7. Passez les quiz post-leçon
1. Forker ou cloner le dépôt
2. Naviguer dans les répertoires des leçons dans l'ordre
3. Lire les fichiers README de chaque leçon
4. Compléter les quiz pré-lesson sur https://ff-quizzes.netlify.app/web/
5. Travailler les exemples de code dans les dossiers des leçons
6. Réaliser les devoirs et challenges
7. Passer les quiz post-lesson
### Développement en direct
@ -106,7 +106,7 @@ python api.py
## Instructions de test
### Tests de lapplication Quiz
### Test de Quiz App
```bash
cd quiz-app
@ -114,7 +114,7 @@ npm run lint # Vérifier les problèmes de style de code
npm run build # Vérifier que la compilation réussit
```
### Tests de lAPI bancaire
### Test de l'API Bank
```bash
cd 7-bank-project/api
@ -122,70 +122,70 @@ npm run lint # Vérifiez les problèmes de style de code
node server.js # Vérifiez que le serveur démarre sans erreurs
```
### Approche générale de test
### Approche générale des tests
- Ce référentiel éducatif ne comporte pas de tests automatisés complets
- Il s'agit d'un dépôt éducatif sans tests automatisés complets
- Les tests manuels se concentrent sur :
- Les exemples de code s'exécutent sans erreurs
- Les liens dans la documentation fonctionnent correctement
- Les builds des projets sexécutent avec succès
- Les exemples respectent les bonnes pratiques
- Exécution sans erreurs des exemples de code
- Fonctionnement correct des liens dans la documentation
- Construction réussie des projets
- Respect des meilleures pratiques dans les exemples
### Vérifications avant soumission
- Lancez `npm run lint` dans les dossiers contenant package.json
- Vérifiez que les liens markdown sont valides
- Lancez `npm run lint` dans les répertoires contenant un package.json
- Vérifiez la validité des liens markdown
- Testez les exemples de code dans le navigateur ou Node.js
- Vérifiez que les traductions maintiennent la structure adéquate
- Contrôlez que les traductions maintiennent la structure
## Directives de style de code
### JavaScript
- Utilisez la syntaxe ES6+ moderne
- Suivez les configurations ESLint standard fournies dans les projets
- Utilisez des noms de variables et fonctions significatifs pour la clarté pédagogique
- Ajoutez des commentaires expliquant les concepts pour les apprenants
- Formatez avec Prettier lorsque configuré
- Utiliser la syntaxe moderne ES6+
- Suivre les configurations ESLint standard fournies dans les projets
- Employer des noms de variables et fonctions significatifs pour la clarté éducative
- Ajouter des commentaires expliquant les concepts pour les apprenants
- Formater avec Prettier lorsque configuré
### HTML/CSS
- Éléments HTML5 sémantiques
- Principes de design responsive
- Conventions claires de nommage de classes
- Conventions claires de nommage des classes
- Commentaires expliquant les techniques CSS pour les apprenants
### Python
- Directives de style PEP 8
- Exemples de code clairs et pédagogiques
- Annotations de type lorsque cela aide à lapprentissage
- Respect des guidelines PEP 8
- Exemples de code clairs et éducatifs
- Annotations de type lorsque utiles pour l'apprentissage
### Documentation Markdown
- Hiérarchie claire des titres
- Blocs de code avec spécification du langage
- Liens vers des ressources supplémentaires
- Captures décran et images dans les dossiers `images/`
- Captures d'écran et images dans les dossiers `images/`
- Texte alternatif pour les images pour laccessibilité
### Organisation des fichiers
- Leçons numérotées séquentiellement (1-getting-started-lessons, 2-js-basics, etc.)
- Chaque projet a des dossiers `solution/` et souvent `start/` ou `your-work/`
- Images stockées dans les dossiers `images/` spécifiques à chaque leçon
- Traductions dans la structure `translations/{code-langue}/`
- Images stockées dans les dossiers `images/` spécifiques aux leçons
- Traductions sous la structure `translations/{language-code}/`
## Construction et déploiement
## Compilation et déploiement
### Déploiement de lapplication Quiz (Azure Static Web Apps)
### Déploiement de Quiz App (Azure Static Web Apps)
Lapplication quiz-app est configurée pour le déploiement sur Azure Static Web Apps :
Lapplication quiz-app est configurée pour le déploiement Azure Static Web Apps :
```bash
cd quiz-app
npm run build # Crée le dossier dist/
# Déploie via le workflow GitHub Actions lors d'un push sur main
# Déploie via le workflow GitHub Actions lors d'une poussée vers main
```
Configuration Azure Static Web Apps :
@ -193,7 +193,7 @@ Configuration Azure Static Web Apps :
- **Emplacement de sortie** : `dist`
- **Workflow** : `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Génération de fichier PDF de la documentation
### Génération de la documentation PDF
```bash
npm install # Installer docsify-to-pdf
@ -207,19 +207,19 @@ npm install -g docsify-cli # Installer Docsify globalement
docsify serve # Servir sur localhost:3000
```
### Builds spécifiques aux projets
### Compilations spécifiques aux projets
Chaque répertoire de projet peut avoir son propre processus de build :
- Projets Vue : `npm run build` crée des bundles de production
- Projets statiques : Pas détape de build, les fichiers sont servis directement
Chaque répertoire de projet peut avoir son propre processus de compilation :
- Projets Vue : `npm run build` crée les bundles de production
- Projets statiques : pas détape de build, fichiers servis directement
## Directives pour les pull requests
### Format du titre
Utilisez des titres clairs et descriptifs indiquant le domaine de changement :
- `[Quiz-app] Ajouter un nouveau quiz pour la leçon X`
- `[Lesson-3] Correction dune faute dans le projet terrarium`
Utilisez des titres clairs et descriptifs indiquant la zone modifiée :
- `[Quiz-app] Ajout dun nouveau quiz pour la leçon X`
- `[Lesson-3] Correction de faute dans le projet terrarium`
- `[Translation] Ajout de la traduction espagnole pour la leçon 5`
- `[Docs] Mise à jour des instructions dinstallation`
@ -227,50 +227,50 @@ Utilisez des titres clairs et descriptifs indiquant le domaine de changement :
Avant de soumettre une PR :
1. **Qualité du code** :
- Lancez `npm run lint` dans les répertoires projet affectés
- Corrigez toutes les erreurs et avertissements
1. **Qualité du Code** :
- Lancez `npm run lint` dans les répertoires concernés
- Corrigez toutes les erreurs et avertissements de lint
2. **Vérification du build** :
2. **Vérification de la compilation** :
- Lancez `npm run build` si applicable
- Assurez-vous quil ny a pas derreurs de build
- Assurez-vous quaucune erreur de build napparaît
3. **Validation des liens** :
- Testez tous les liens markdown
- Vérifiez que les références dimages fonctionnent
4. **Revue du contenu** :
- Relisez pour lorthographe et la grammaire
4. **Relecture du contenu** :
- Corrigez lorthographe et la grammaire
- Assurez-vous que les exemples de code sont corrects et pédagogiques
- Vérifiez que les traductions conservent le sens original
- Contrôlez que les traductions conservent le sens original
### Exigences de contribution
### Conditions de contribution
- Accepter la CLA Microsoft (vérification automatique lors de la première PR)
- Respecter le [Code de conduite Open Source de Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Voir [CONTRIBUTING.md](./CONTRIBUTING.md) pour les directives détaillées
- Référencez les numéros de tickets dans la description de la PR si applicable
- Acceptez le CLA Microsoft (vérification automatisée à la première PR)
- Respectez le [Code de conduite Open Source Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Consultez [CONTRIBUTING.md](./CONTRIBUTING.md) pour les règles détaillées
- Mentionnez les numéros dissues dans la description de la PR si applicable
### Processus de revue
- Les PR sont revues par les mainteneurs et la communauté
- La clarté pédagogique est priorisée
- Les exemples de code doivent suivre les meilleures pratiques actuelles
- Les traductions sont revues pour leur exactitude et adaptation culturelle
- PRs revues par les mainteneurs et la communauté
- Priorité à la clarté pédagogique
- Exemples de code doivent suivre les meilleures pratiques actuelles
- Traductions vérifiées pour précision et adéquation culturelle
## Système de traduction
### Traduction automatisée
- Utilise GitHub Actions avec le workflow co-op-translator
- Traduit automatiquement en plus de 50 langues
- Fichiers sources dans les répertoires principaux
- Fichiers traduits dans les répertoires `translations/{code-langue}/`
- Utilisation de GitHub Actions avec workflow co-op-translator
- Traduction automatique en plus de 50 langues
- Fichiers source dans les répertoires principaux
- Fichiers traduits dans les dossiers `translations/{language-code}/`
### Ajout daméliorations manuelles de traduction
1. Localisez le fichier dans `translations/{code-langue}/`
2. Effectuez les améliorations tout en préservant la structure
1. Localisez le fichier dans `translations/{language-code}/`
2. Améliorez le contenu en préservant la structure
3. Assurez-vous que les exemples de code restent fonctionnels
4. Testez tout contenu de quiz localisé
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Débogage et résolution de problèmes
## Débogage et dépannage
### Problèmes courants
**Lapplication Quiz ne démarre pas** :
- Vérifiez la version de Node.js (v14+ recommandé)
- Supprimez `node_modules` et `package-lock.json`, puis relancez `npm install`
- Vérifiez les conflits de port (par défaut : Vite utilise le port 5173)
**Lapplication quiz ne démarre pas** :
- Vérifiez la version de Node.js (v14+ recommandée)
- Supprimez `node_modules` et `package-lock.json`, relancez `npm install`
- Vérifiez les conflits de ports (par défaut Vite utilise le port 5173)
**Le serveur API ne démarre pas** :
- Vérifiez que la version Node.js est suffisante (node >=10)
- Contrôlez si le port est déjà utilisé
- Vérifiez que la version de Node.js est suffisante (node >=10)
- Vérifiez si le port est déjà utilisé
- Assurez-vous que toutes les dépendances sont installées avec `npm install`
**Lextension de navigateur ne se charge pas** :
- Vérifiez que le fichier manifest.json est correctement formaté
- Vérifiez la console du navigateur pour les erreurs
- Suivez les instructions dinstallation spécifiques au navigateur
**Lextension navigateur ne se charge pas** :
- Vérifiez que manifest.json est bien formaté
- Consultez la console du navigateur pour les erreurs
- Suivez les instructions spécifiques au navigateur pour linstallation de lextension
**Problèmes avec le projet de chat Python** :
**Problèmes avec le projet chat Python** :
- Assurez-vous que le package OpenAI est installé : `pip install openai`
- Vérifiez que la variable denvironnement GITHUB_TOKEN est définie
- Contrôlez les permissions daccès aux Modeles GitHub
- Vérifiez que la variable denvironnement GITHUB_TOKEN est bien définie
- Contrôlez les permissions daccès aux GitHub Models
**Docsify ne sert pas la documentation** :
- Installez docsify-cli globalement : `npm install -g docsify-cli`
- Lancez depuis le répertoire racine du référentiel
- Lancez depuis le répertoire racine du dépôt
- Vérifiez que `docs/_sidebar.md` existe
### Conseils pour lenvironnement de développement
- Utilisez VS Code avec lextension Live Server pour les projets HTML
- Installez les extensions ESLint et Prettier pour un formatage cohérent
- Utilisez les outils DevTools du navigateur pour déboguer le JavaScript
- Pour les projets Vue, installez lextension Vue DevTools pour le navigateur
- Utilisez les DevTools du navigateur pour déboguer JavaScript
- Pour les projets Vue, installez lextension navigateur Vue DevTools
### Considérations de performance
- Le grand nombre de fichiers traduits (plus de 50 langues) rend les clones complets volumineux
- Utilisez un clone superficiel si vous travaillez uniquement sur le contenu : `git clone --depth 1`
- Excluez les traductions des recherches quand vous travaillez sur le contenu en anglais
- Le grand nombre de fichiers traduits (50+ langues) rend le clonage complet volumineux
- Utilisez un clone shallow si vous travaillez uniquement sur le contenu : `git clone --depth 1`
- Excluez les traductions des recherches lorsque vous travaillez sur le contenu anglais
- Les processus de build peuvent être lents au premier lancement (npm install, build Vite)
## Considérations de sécurité
### Variables denvironnement
- Les clés API ne doivent jamais être commises dans le référentiel
- Les clés API ne doivent jamais être commises dans le dépôt
- Utilisez des fichiers `.env` (déjà dans `.gitignore`)
- Documentez les variables denvironnement requises dans les README des projets
### Projets Python
- Utilisez des environnements virtuels : `python -m venv venv`
- Maintenez les dépendances à jour
- Les tokens GitHub doivent posséder les permissions minimales requises
- Gardez les dépendances à jour
- Les tokens GitHub doivent avoir les permissions minimales nécessaires
### Accès aux modèles GitHub
### Accès aux GitHub Models
- Tokens daccès personnels (PAT) nécessaires pour les modèles GitHub
- Les Personal Access Tokens (PAT) sont requis pour GitHub Models
- Les tokens doivent être stockés en variables denvironnement
- Ne jamais commettre les tokens ou les identifiants
- Ne jamais commettre les tokens ou informations didentification
## Notes supplémentaires
## Notes additionnelles
### Public cible
- Débutants complets en développement web
- Étudiants et autodidactes
- Enseignants utilisant le programme dans les classes
- Contenu conçu pour laccessibilité et la montée en compétences progressive
- Étudiants et auto-apprenants
- Enseignants utilisant le programme en classe
- Contenu conçu pour être accessible et progressif
### Philosophie éducative
- Approche par apprentissage par projet
- Approche dapprentissage par projet
- Vérifications fréquentes des connaissances (quiz)
- Exercices de codage pratiques
- Exemples dapplication dans le monde réel
- Focus sur les fondamentaux avant les frameworks
- Exercices pratiques de codage
- Exemples dapplication réelle
- Focalisation sur les fondamentaux avant les frameworks
### Maintenance du référentiel
### Maintenance du dépôt
- Communauté active dapprenants et contributeurs
- Mises à jour régulières des dépendances et du contenu
- Tickets et discussions surveillés par les mainteneurs
- Suivi des issues et discussions par les mainteneurs
- Mises à jour des traductions automatisées via GitHub Actions
### Ressources associées
- [Modules Microsoft Learn](https://docs.microsoft.com/learn/)
- [Ressources du Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [Ressources Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recommandé pour les apprenants
- Cours complémentaires : AI générative, Data Science, ML, IoT disponibles
- Cours additionnels : AI générative, Data Science, ML, IoT disponibles
### Travailler avec des projets spécifiques
Pour des instructions détaillées sur les projets individuels, consultez les fichiers README dans :
- `quiz-app/README.md` - application de quiz Vue 3
- `7-bank-project/README.md` - application bancaire avec authentification
- `5-browser-extension/README.md` - développement dextension de navigateur
- `6-space-game/README.md` - développement de jeu basé sur Canvas
- `9-chat-project/README.md` - projet dassistant de chat IA
- `quiz-app/README.md` - Application quiz Vue 3
- `7-bank-project/README.md` - Application bancaire avec authentification
- `5-browser-extension/README.md` - Développement dextension navigateur
- `6-space-game/README.md` - Développement de jeu basé sur Canvas
- `9-chat-project/README.md` - Projet assistant de chat AI
### Structure Monorepo
### Structure monorepo
Même sil ne sagit pas dun monorepo traditionnel, ce référentiel contient plusieurs projets indépendants :
Bien que ce ne soit pas un monorepo traditionnel, ce dépôt contient plusieurs projets indépendants :
- Chaque leçon est autonome
- Les projets ne partagent pas les dépendances
- Les projets ne partagent pas leurs dépendances
- Travaillez sur des projets individuels sans impacter les autres
- Clonez tout le référentiel pour lexpérience complète du programme
- Clonez le dépôt complet pour lexpérience complète du programme
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à laide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions dassurer lexactitude, veuillez noter que les traductions automaties peuvent contenir des erreurs ou des imprécisions. Le document original dans sa langue dorigine doit être considéré comme la source faisant foi. Pour des informations critiques, il est recommandé de recourir à une traduction professionnelle humaine. Nous déclinons toute responsabilité en cas de malentendus ou dinterprétations erronées résultant de lutilisation de cette traduction.
Ce document a été traduit à laide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions dassurer lexactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des imprécisions. Le document original dans sa langue dorigine doit être considéré comme la source faisant autorité. Pour les informations essentielles, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous ne pouvons être tenus responsables des malentendus ou des erreurs dinterprétation résultant de lutilisation de cette traduction.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save