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

pull/1690/head
localizeflow[bot] 3 weeks ago
parent 9442efe774
commit 605db111a9

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

@ -2,29 +2,29 @@
## 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 praxisorientierte Lektionen zu JavaScript, CSS und HTML umfasst.
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.
### Hauptkomponenten
- **Bildungsinhalte**: 24 strukturierte Lektionen, organisiert in projektbasierten Modulen
- **Praktische Projekte**: Terrarium, Tipp-Spiel, Browser-Erweiterung, Weltraumspiel, Bank-App, Code-Editor und KI-Chat-Assistent
- **Interaktive Quiz**: 48 Quiz mit jeweils 3 Fragen (Vor- und Nach-Lektionsbewertungen)
- **Mehrsprachige Unterstützung**: Automatisierte Übersetzungen für über 50 Sprachen mittels GitHub Actions
- **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
- **Technologien**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (für KI-Projekte)
### Architektur
- Bildungs-Repository mit lektionbasierter Struktur
- Jeder Lektionen-Ordner enthält README, Codebeispiele und Lösungen
- Eigenständige Projekte in separaten Verzeichnissen (quiz-app, verschiedene Lektionen-Projekte)
- 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 bereitgestellt über Docsify und als PDF verfügbar
- Dokumentation verfügbar via Docsify und als PDF
## Einrichtungsbefehle
## Einrichtungskommandos
Dieses Repository dient hauptsächlich zum Konsum von Bildungsinhalten. Zum Arbeiten mit spezifischen Projekten:
Dieses Repository ist in erster Linie für die Nutzung von Bildungsinhalten bestimmt. Für die Arbeit mit spezifischen Projekten:
### Einrichtung des Hauptrepositories
### Hauptrepository Einrichtung
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
@ -56,15 +56,15 @@ npm run format # Mit Prettier formatieren
```bash
cd 5-browser-extension/solution
npm install
# Befolgen Sie die browserspezifischen Anweisungen zum Laden von Erweiterungen
# Befolgen Sie browserspezifische Anweisungen zum Laden von Erweiterungen
```
### Weltraumspiele-Projekte
### Weltraumspiel-Projekte
```bash
cd 6-space-game/solution
npm install
# Öffnen Sie index.html im Browser oder verwenden Sie Live Server
# Öffne index.html im Browser oder nutze Live Server
```
### Chat-Projekt (Python Backend)
@ -76,105 +76,105 @@ pip install openai
python api.py
```
## Entwicklungs-Workflow
## Entwicklungsablauf
### Für Beitragende von Inhalten
### Für Inhaltsbeiträge
1. **Forke das Repository** in dein GitHub-Konto
2. **Clonse deinen Fork** lokal
1. **Forke das Repository** in deinen GitHub-Account
2. **Klone deinen Fork** lokal
3. **Erstelle einen neuen Branch** für deine Änderungen
4. Ändere Lektionstexte oder Codebeispiele
5. Teste Codeänderungen in entsprechenden Projektordnern
6. Reiche Pull Requests ein gemäß Beitragsrichtlinien
4. Ändere Inhalt der Lektionen oder Codebeispiele
5. Teste Änderungen an Code in den relevanten Projektverzeichnissen
6. Reiche Pull Requests ein gemäß den Beitragsrichtlinien
### Für Lernende
1. Forke oder clonse das Repository
2. Navigiere nacheinander durch die Lektionen-Ordner
3. Lies die README-Dateien jeder Lektion
4. Mache Vor-Lektions-Quiz unter https://ff-quizzes.netlify.app/web/
5. Bearbeite Codebeispiele in den Lektionen-Ordnern
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. Bearbeite Nach-Lektions-Quiz
7. Absolviere die Nach-Lektion-Quiz
### Live-Entwicklung
- **Dokumentation**: Starte `docsify serve` im Root (Port 3000)
- **Dokumentation**: Führe `docsify serve` im Root aus (Port 3000)
- **Quiz-App**: Starte `npm run dev` im quiz-app-Verzeichnis
- **Projekte**: Nutze die VS Code Live Server-Erweiterung für HTML-Projekte
- **API-Projekte**: Starte `npm start` in den jeweiligen API-Verzeichnissen
- **Projekte**: Benutze VS Code Live Server Erweiterung für HTML-Projekte
- **API-Projekte**: Starte `npm start` in entsprechenden API-Verzeichnissen
## Testanweisungen
### Quiz-App Tests
### Quiz-App Testing
```bash
cd quiz-app
npm run lint # Auf Probleme im Code-Stil prüfen
npm run build # Überprüfen, ob der Build erfolgreich ist
npm run lint # Überprüfen Sie auf Code-Stilprobleme
npm run build # Überprüfen Sie, ob der Build erfolgreich ist
```
### Bank-API Tests
### Bank-API Testing
```bash
cd 7-bank-project/api
npm run lint # Überprüfen Sie auf Code-Stil-Probleme
node server.js # Überprüfen Sie, ob der Server ohne Fehler startet
npm run lint # Überprüfen Sie auf Probleme im Code-Stil
node server.js # Überprüfen Sie, ob der Server ohne Fehler gestartet wird
```
### Allgemeine Testansatz
### Allgemeiner Testansatz
- Dies ist ein Bildungs-Repository ohne umfassende automatisierte Tests
- Dies ist ein Bildungsrepository ohne umfassende automatisierte Tests
- Manuelle Tests konzentrieren sich auf:
- Codebeispiele laufen ohne Fehler
- Links in der Dokumentation funktionieren korrekt
- Projekte bauen erfolgreich
- Beispiele folgen Best Practices
### Vor-Einreichungsprüfungen
### Vor dem Einreichen überprüfen
- Führe `npm run lint` in Verzeichnissen mit package.json aus
- Überprüfe Markdown-Links auf Gültigkeit
- Überprüfe Gültigkeit aller Markdown-Links
- Teste Codebeispiele im Browser oder Node.js
- Prüfe, ob Übersetzungen die richtige Struktur bewahren
- Stelle sicher, dass Übersetzungen korrekt strukturiert sind
## Code-Stilrichtlinien
## Code-Stil-Richtlinien
### JavaScript
- Verwende moderne ES6+ Syntax
- Folge standardisierten ESLint-Konfigurationen der Projekte
- Nutze aussagekräftige Variablen- und Funktionsnamen für Bildungszwecke
- Füge Kommentare hinzu, die Konzepte für Lernende erklären
- 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
### HTML/CSS
- Semantische HTML5-Elemente
- Responsive Design-Prinzipien
- Klare Klassennamenskonventionen
- Kommentare erklären CSS-Techniken für Lernende
- Responsive Design Prinzipien
- Klare Klassennamen-Konventionen
- Kommentare, die CSS-Techniken für Lernende erklären
### Python
- PEP 8 Stilrichtlinien
- Klare, bildungsorientierte Codebeispiele
- Type-Hints, wenn hilfreich für das Lernen
- Klare, pädagogische Codebeispiele
- Type Hints, wo nützlich für das Lernen
### Markdown-Dokumentation
- Klare Überschriftenhierarchie
- Klare Überschriften-Hierarchie
- Codeblöcke mit Sprachangabe
- Links zu zusätzlichen Ressourcen
- Links zu weiterführenden Ressourcen
- Screenshots und Bilder in `images/` Verzeichnissen
- Alt-Text für Bilder zur Barrierefreiheit
- Alt-Texte für Bilder für Barrierefreiheit
### Datei-Organisation
### Dateiorganisation
- Lektionen durchnummeriert (1-getting-started-lessons, 2-js-basics, etc.)
- Jedes Projekt hat `solution/` und oft auch `start/` oder `your-work/` Verzeichnisse
- Bilder im lektionenspezifischen `images/` Ordner
- Übersetzungen in der Struktur `translations/{language-code}/`
- 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
## Build und Deployment
@ -184,77 +184,77 @@ Die quiz-app ist für Azure Static Web Apps Deployment konfiguriert:
```bash
cd quiz-app
npm run build # Erstellt den dist/-Ordner
# Führt die Bereitstellung über den GitHub Actions Workflow bei Push auf main durch
npm run build # Erstellt den Ordner dist/
# Führt Bereitstellung über GitHub Actions Workflow bei Push zum main durch
```
Azure Static Web Apps Konfiguration:
- **App Standort**: `/quiz-app`
- **Ausgabeort**: `dist`
- **App-Location**: `/quiz-app`
- **Output-Location**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### PDF Generierung der Dokumentation
### Dokumentations-PDF-Erstellung
```bash
npm install # Installiere docsify-to-pdf
npm run convert # Erzeuge PDF aus docs
npm run convert # PDF aus Docs generieren
```
### Docsify Dokumentation
### Docsify-Dokumentation
```bash
npm install -g docsify-cli # Installiere Docsify global
docsify serve # Diene auf localhost:3000
docsify serve # Bereitstellen auf localhost:3000
```
### Projektspezifische Builds
Jeder Projektordner kann einen eigenen Build-Prozess haben:
- Vue Projekte: `npm run build` erstellt Produktions-Bundles
- Statische Projekte: Kein Build-Schritt, Dateien direkt ausliefern
Jedes Projektverzeichnis kann einen eigenen Buildprozess haben:
- Vue-Projekte: `npm run build` erzeugt Produktionsbundles
- Statische Projekte: Kein Build-Schritt, Dateien werden direkt serviert
## Pull Request Richtlinien
### Titel-Format
Verwende klare, beschreibende Titel, die den Änderungsbereich angeben:
- `[Quiz-app] Neues Quiz für Lektion X hinzufügen`
- `[Lesson-3] Tippfehler im Terrarium-Projekt beheben`
- `[Quiz-app] Neue Quiz für Lektion X hinzufügen`
- `[Lesson-3] Rechtschreibfehler im Terrarium-Projekt beheben`
- `[Translation] Spanische Übersetzung für Lektion 5 hinzufügen`
- `[Docs] Setup-Anleitungen aktualisieren`
- `[Docs] Setup-Anweisungen aktualisieren`
### Erforderliche Prüfungen
Vor Einreichung eines PR:
Vor dem Einreichen eines PR:
1. **Codequalität**:
- Führe `npm run lint` in betroffenen Projektverzeichnissen aus
- Behebe alle Lint-Fehler und -Warnungen
- Behebe alle Linting-Fehler und -Warnungen
2. **Build-Verifizierung**:
- Führe `npm run build` aus, falls zutreffend
- Führe `npm run build` falls zutreffend aus
- Stelle sicher, dass keine Build-Fehler auftreten
3. **Linkvalidierung**:
3. **Link-Validierung**:
- Teste alle Markdown-Links
- Überprüfe Bildreferenzen
- Überprüfe Bildverweise auf Funktion
4. **Inhaltsprüfung**:
- Korrekturlesen auf Rechtschreibung und Grammatik
- Überprüfe, dass Codebeispiele korrekt und lehrreich sind
- Verifiziere, dass Übersetzungen den ursprünglichen Sinn bewahren
- Sicherstellen, dass Codebeispiele korrekt und lehrreich sind
- Übersetzungen auf korrekte Bedeutung prüfen
### Beitragende Voraussetzungen
### Beitragsanforderungen
- Zustimmung zur Microsoft CLA (automatische Prüfung beim ersten PR)
- Befolge den [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Siehe [CONTRIBUTING.md](./CONTRIBUTING.md) für detaillierte Richtlinien
- Referenziere Issue-Nummern in der PR-Beschreibung, falls zutreffend
- 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
### Prüfprozess
### Review-Prozess
- PRs werden von Maintainers und Community geprüft
- Bildungsinhalte werden priorisiert
- Pädagogische Klarheit hat Priorität
- Codebeispiele sollten aktuellen Best Practices folgen
- Übersetzungen werden auf Genauigkeit und kulturelle Angemessenheit geprüft
@ -262,17 +262,17 @@ Vor Einreichung eines PR:
### Automatisierte Übersetzung
- Nutzt GitHub Actions mit co-op-translator Workflow
- Übersetzt automatisch in über 50 Sprachen
- Verwendet GitHub Actions mit co-op-translator Workflow
- Übersetzt automatisch in 50+ Sprachen
- Quelldateien in Hauptverzeichnissen
- Übersetzte Dateien in `translations/{language-code}/` Verzeichnissen
### Manuelle Übersetzungsverbesserungen hinzufügen
1. Datei in `translations/{language-code}/` finden
2. Verbesserungen vornehmen unter Erhaltung der Struktur
3. Sicherstellen, dass Codebeispiele weiterhin funktionieren
4. Lokale Quiz-Inhalte testen
1. Datei in `translations/{language-code}/` aufrufen
2. Verbesserungen vornehmen, Struktur erhalten
3. Sicherstellen, dass Codebeispiele funktionsfähig bleiben
4. Lokalisierte Quizinhalte testen
### Übersetzungs-Metadaten
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Debugging und Fehlersuche
## Debuggen und Fehlerbehebung
### Häufige Probleme
**Quiz-App startet nicht**:
- Node.js Version prüfen (v14+ empfohlen)
- `node_modules` und `package-lock.json` löschen, `npm install` neu ausführen
- Port-Konflikte prüfen (Standard: Vite verwendet Port 5173)
- `node_modules` und `package-lock.json` löschen, dann `npm install` erneut ausführen
- Prüfe Port-Konflikte (Standard: Vite nutzt Port 5173)
**API-Server startet nicht**:
- Node.js Version >= 10 sicherstellen
- Prüfen, ob Port bereits in Benutzung ist
- Alle Abhängigkeiten mit `npm install` installieren
**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?
**Browser-Erweiterung lädt nicht**:
- Manifest.json auf korrekte Formatierung prüfen
- Browser-Konsole auf Fehler überprüfen
- Browser-spezifische Installationsanleitungen befolgen
- Browser-Konsole auf Fehler untersuchen
- Browser-spezifische Installationsanweisungen beachten
**Probleme beim Python-Chat-Projekt**:
- OpenAI-Paket installiert? `pip install openai`
**Probleme mit Python Chat-Projekt**:
- OpenAI-Paket installieren: `pip install openai`
- GITHUB_TOKEN Umgebungsvariable gesetzt?
- Zugriff auf GitHub Models überprüfen
- Zugriffsrechte auf GitHub Models prüfen
**Docsify liefert keine Dokumente aus**:
**Docsify liefert keine Docs aus**:
- docsify-cli global installieren: `npm install -g docsify-cli`
- Aus dem Root-Verzeichnis des Repositories starten
- Prüfen, ob `docs/_sidebar.md` vorhanden ist
- Im Root-Verzeichnis des Repositories ausführen
- Prüfe, ob `docs/_sidebar.md` existiert
### Tipps zur Entwicklungsumgebung
- VS Code mit Live Server Erweiterung für HTML-Projekte nutzen
- ESLint und Prettier Erweiterungen für konsistente Formatierung installieren
- Browser DevTools zur JavaScript-Fehlersuche verwenden
- Für Vue-Projekte Vue DevTools Browser-Erweiterung installieren
- 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
### Performance-Überlegungen
### Performance Überlegungen
- Große Anzahl an übersetzten Dateien (50+ Sprachen) führt zu großen Klonen
- Für Arbeit nur an Inhalten: flaches Klonen mit `git clone --depth 1`
- Übersetzungen bei Suche ausschließen, wenn nur Englisch nötig
- Buildvorgänge können beim ersten Lauf langsam sein (npm install, Vite Build)
- 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)
## Sicherheitsüberlegungen
### Umgebungsvariablen
- API-Schlüssel dürfen niemals im Repository abgelegt werden
- `.env` Dateien verwenden (sind in `.gitignore`)
- Erforderliche Umgebungsvariablen in den Projekt-READMEs dokumentieren
- 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
### Python-Projekte
### Python Projekte
- Virtuelle Umgebungen verwenden: `python -m venv venv`
- Abhängigkeiten aktuell halten
- GitHub-Token mit minimal erforderlichen Berechtigungen verwenden
- GitHub Tokens mit minimalen erforderlichen Rechten nutzen
### Zugriff auf GitHub Models
### GitHub Models Zugriff
- Personal Access Tokens (PAT) sind erforderlich
- Persönliche Zugangstoken (PAT) für GitHub Models erforderlich
- Tokens als Umgebungsvariablen speichern
- Niemals Tokens oder Zugangsdaten commiten
- Tokens oder Zugangsdaten niemals commiten
## Zusätzliche Hinweise
## Weitere Hinweise
### Zielgruppe
- Absolute Anfänger in der Webentwicklung
- Studierende und Selbstlerner
- Lehrkräfte, die das Curriculum im Unterricht verwenden
- Inhalt ist barrierefrei gestaltet und fördert schrittweises Lernen
- Schüler und Selbstlernende
- Lehrer, die das Curriculum im Unterricht einsetzen
- Inhalte sind barrierefrei und bauen Fähigkeiten schrittweise auf
### Bildungsphilosophie
### Pädagogische Philosophie
- Projektbasiertes Lernen
- Häufige Wissensüberprüfungen (Quizzes)
- Häufige Wissensabfragen (Quiz)
- Praktische Programmierübungen
- Praxisnahe Anwendungsbeispiele
- Praxisnahe Beispiele
- Fokus auf Grundlagen vor Frameworks
### Repository-Wartung
- Aktive Community von Lernenden und Beitragenden
- Aktive Community aus Lernenden und Beitragsleistenden
- Regelmäßige Updates von Abhängigkeiten und Inhalten
- Issues und Diskussionen werden von Maintainers betreut
- Übersetzungen werden automatisiert über GitHub Actions aktualisiert
- Übersetzungsaktualisierungen automatisiert via GitHub Actions
### Verwandte Ressourcen
- [Microsoft Learn Module](https://docs.microsoft.com/learn/)
- [Student Hub Ressourcen](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) empfohlen für Lernende
- Weitere Kurse: Generative AI, Data Science, ML, IoT Curricula verfügbar
- Zusätzliche Kurse: Generative AI, Data Science, ML, IoT Curricula verfügbar
### Arbeiten mit spezifischen Projekten
### Arbeit mit spezifischen Projekten
Für detaillierte Anleitungen zu einzelnen Projekten siehe README-Dateien in:
Detaillierte Anweisungen zu einzelnen Projekten in den README-Dateien:
- `quiz-app/README.md` - Vue 3 Quiz-Anwendung
- `7-bank-project/README.md` - Bankanwendung mit Authentifizierung
- `7-bank-project/README.md` - Banking-Anwendung mit Authentifizierung
- `5-browser-extension/README.md` - Entwicklung von Browser-Erweiterungen
- `6-space-game/README.md` - Spielentwicklung mit Canvas
- `9-chat-project/README.md` - KI Chat-Assistent Projekt
- `6-space-game/README.md` - Canvas-basiertes Weltraumspiel
- `9-chat-project/README.md` - KI-Chat-Assistent Projekt
### Monorepo-Struktur
Obwohl kein klassisches Monorepo, enthält dieses Repository mehrere unabhängige Projekte:
Obwohl kein traditionelles Monorepo, enthält dieses Repository mehrere unabhängige Projekte:
- Jede Lektion ist eigenständig
- Projekte teilen keine Abhängigkeiten
- Arbeit an einzelnen Projekten ohne Beeinträchtigung anderer möglich
- Komplettes Repository klonen für das volle Curriculum-Erlebnis
- Arbeit an einzelnen Projekten ohne Einfluss auf andere möglich
- Komplettes Repo klonen für das vollständige 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 uns um Genauigkeit bemühen, bitten wir zu beachten, dass automatische Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache gilt als maßgebliche Quelle. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.
**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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

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

@ -1,24 +1,24 @@
# AGENTS.md
## Resumen del Proyecto
## Descripción del Proyecto
Este es un repositorio de currículo educativo para enseñar fundamentos de desarrollo web a principiantes. El currículo es un curso completo de 12 semanas desarrollado por Microsoft Cloud Advocates, con 24 lecciones prácticas que cubren JavaScript, CSS y HTML.
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.
### Componentes Clave
- **Contenido Educativo**: 24 lecciones estructuradas organizadas en módulos basados en proyectos
- **Proyectos Prácticos**: Terrario, Juego de mecanografía, Extensión de navegador, Juego espacial, Aplicación bancaria, Editor de código y Asistente de chat IA
- **Cuestionarios Interactivos**: 48 cuestionarios con 3 preguntas cada uno (evaluaciones pre/post lección)
- **Soporte Multilingüe**: Traducciones automáticas a más de 50 idiomas mediante GitHub Actions
- **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)
### 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 lecciones)
- Sistema de traducción usando GitHub Actions (co-op-translator)
- Documentación servida mediante Docsify y disponible en PDF
- 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)
- Documentación servida vía Docsify y disponible en PDF
## Comandos de Configuración
@ -36,7 +36,7 @@ cd Web-Dev-For-Beginners
```bash
cd quiz-app
npm install
npm run dev # Iniciar servidor de desarrollo
npm run dev # Iniciar el servidor de desarrollo
npm run build # Construir para producción
npm run lint # Ejecutar ESLint
```
@ -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 extensiones
# Siga las instrucciones específicas del navegador para cargar la extensión
```
### Proyectos del Juego Espacial
### Proyectos de Juego Espacial
```bash
cd 6-space-game/solution
@ -76,32 +76,32 @@ pip install openai
python api.py
```
## Flujo de Desarrollo
## Flujo de Trabajo de Desarrollo
### Para Contribuidores de Contenido
1. **Haz un fork del repositorio** en tu cuenta de GitHub
2. **Clona tu fork** localmente
3. **Crea una nueva rama** para tus cambios
4. Realiza cambios en el contenido de 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 proyectos relevantes
6. Envía pull requests siguiendo las directrices de contribución
### Para Estudiantes
1. Haz fork o clona el repositorio
2. Navega por los directorios de las lecciones secuencialmente
3. Lee los archivos README de cada lección
4. Completa los cuestionarios previos a la lección en https://ff-quizzes.netlify.app/web/
5. Trabaja con los ejemplos de código en las carpetas de lecciones
6. Completa tareas y desafíos
7. Realiza los cuestionarios posteriores a la lección
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
### 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` en el 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
@ -110,7 +110,7 @@ python api.py
```bash
cd quiz-app
npm run lint # Comprobar problemas de estilo de código
npm run lint # Verificar problemas de estilo de código
npm run build # Verificar que la compilación tenga éxito
```
@ -118,62 +118,62 @@ npm run build # Verificar que la compilación tenga éxito
```bash
cd 7-bank-project/api
npm run lint # Comprobar problemas de estilo de código
node server.js # Verificar que el servidor arranque sin errores
npm run lint # Verificar problemas de estilo de código
node server.js # Verificar que el servidor se inicie sin errores
```
### Enfoque General de Pruebas
- Este es un repositorio educativo sin pruebas automatizadas completas
- Las pruebas manuales se centran en:
- Que los ejemplos de código se ejecuten sin errores
- Que los enlaces en la documentación funcionen correctamente
- Que las compilaciones de proyectos se completen exitosamente
- Que los ejemplos sigan buenas prácticas
- 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
### Verificaciones Previas a la Envío
### Verificaciones Previas a Enviar PR
- 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
- Comprueba que las traducciones mantengan la estructura adecuada
- 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
## Guías de Estilo de Código
### JavaScript
- Usa sintaxis moderna ES6+
- Sigue las configuraciones estándar de ESLint provistas en proyectos
- Usa nombres de variables y funciones significativos para claridad educativa
- Añade comentarios explicando conceptos para los estudiantes
- Formatea usando Prettier donde esté configurado
- 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
### HTML/CSS
- Elementos semánticos de HTML5
- Principios de diseño responsivo
- Convenciones claras para nombres de clases
- Comentarios que expliquen técnicas CSS para los estudiantes
- Elementos semánticos HTML5
- Principios de diseño responsive
- Convenciones claras para nombres de clases
- Comentarios que expliquen técnicas CSS para estudiantes
### Python
- Guías de estilo PEP 8
- Código claro y educativo
- Anotaciones de tipos donde ayuden al aprendizaje
- Directrices de estilo PEP 8
- Ejemplos de código claros y educativos
- Anotaciones de tipo donde sean útiles para el aprendizaje
### Documentación Markdown
- 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
- 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
### 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 de las lecciones
- 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}/`
## Construcción y Despliegue
@ -185,12 +185,12 @@ 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 a main
# Despliega a través del flujo de trabajo de GitHub Actions al hacer push en main
```
Configuración de Azure Static Web Apps:
- **Ubicación de la App**: `/quiz-app`
- **Ubicación de salida**: `dist`
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`
### Generación de PDF de Documentación
@ -200,83 +200,83 @@ npm install # Instalar docsify-to-pdf
npm run convert # Generar PDF desde docs
```
### Documentación con Docsify
### Documentación Docsify
```bash
npm install -g docsify-cli # Instalar Docsify globalmente
docsify serve # Servir en localhost:3000
```
### Compilaciones Específicas de Proyectos
### Construcciones Específicas de Proyectos
Cada directorio de proyecto puede tener su propio proceso de compilación:
- Proyectos Vue: `npm run build` crea paquetes de producción
- Proyectos estáticos: Sin paso de compilación, se sirven archivos directamente
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
## Guías para Pull Requests
### Formato del Título
Usa títulos claros y descriptivos indicando el área del cambio:
- `[Quiz-app] Añadir nuevo quiz para la lección X`
- `[Lesson-3] Corregir error tipográfico en proyecto terrarium`
- `[Translation] Añadir traducción al español para la lección 5`
- `[Docs] Actualizar instrucciones de configuración`
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`
### Verificaciones Requeridas
Antes de enviar un PR:
1. **Calidad del Código**:
- Ejecuta `npm run lint` en los directorios de proyecto afectados
1. **Calidad de Código**:
- Ejecuta `npm run lint` en los directorios afectados
- Corrige todos los errores y advertencias de lint
2. **Verificación de Construcción**:
- Ejecuta `npm run build` si aplica
- Asegúrate de que no haya errores de construcción
2. **Verificación de Construcción**:
- Ejecuta `npm run build` si aplica
- Asegura que no haya errores de construcción
3. **Validación de Enlaces**:
- Prueba todos los enlaces markdown
- Verifica que las referencias a imágenes funcionen
3. **Validación de Enlaces**:
- Prueba todos los enlaces markdown
- Verifica que las referencias de imágenes funcionen
4. **Revisión de Contenido**:
- Revisa ortografía y gramática
- Asegura que los ejemplos de código sean correctos y educativos
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
### Requisitos de Contribución
### Requisitos para Contribuir
- 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 guías detalladas
- Referenciar números de issues en la descripción del PR si aplica
- 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
### Proceso de Revisión
- Los PRs son revisados por mantenedores y comunidad
- Se prioriza la claridad educativa
- Los ejemplos deben seguir las mejores prácticas actuales
- Las traducciones son revisadas por precisión y adecuación cultural
- 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
## Sistema de Traducción
### Traducción Automática
- Usa GitHub Actions con el flujo de trabajo co-op-translator
- Traduce automáticamente a más de 50 idiomas
- Archivos fuente en directorios principales
- 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}/`
### Añadiendo Mejoras Manuales a la Traducción
### Añadiendo 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
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
### Metadatos de Traducción
Los archivos traducidos incluyen encabezado de metadatos:
Los archivos traducidos incluyen encabezado de metadatos:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Problemas Comunes
**La aplicación de quiz no arranca**:
- Verifica versión de Node.js (se recomienda v14+)
- Elimina `node_modules` y `package-lock.json`, ejecuta `npm install` de nuevo
- Revisa conflictos de puerto (por defecto: Vite usa puerto 5173)
**El servidor API no arranca**:
- Verifica que la versión de Node.js sea mínima (node >=10)
- Comprueba si el puerto ya está en uso
- Asegúrate que todas las dependencias estén instaladas con `npm install`
**La extensión del navegador no carga**:
- Verifica que manifest.json esté bien formateado
- Revisa la consola del navegador por errores
- Sigue las instrucciones específicas para instalar extensiones en cada navegador
**Problemas con el 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 los permisos de acceso a GitHub Models
**Docsify no sirve la documentación**:
- Instala docsify-cli globalmente: `npm install -g docsify-cli`
- Ejecuta desde el directorio raíz del repositorio
**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)
**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`
**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
**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
**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
### Consejos para el Entorno de Desarrollo
- Usa VS Code con la extensión Live Server para proyectos HTML
- Instala las extensiones ESLint y Prettier para formato consistente
- Usa DevTools del navegador para depurar JavaScript
- Para proyectos Vue, instala la extensión Vue DevTools del navegador
- 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
### Consideraciones de Rendimiento
- Gran cantidad de archivos traducidos (50+ idiomas) hacen que los clones completos sean grandes
- Usa clonación superficial si solo trabajas en contenido: `git clone --depth 1`
- Excluye traducciones de las búsquedas cuando trabajes en contenido en inglés
- Los procesos de construcción pueden ser lentos en la primera ejecución (npm install, construcción con Vite)
- 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
- 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 al repositorio
- Usa archivos `.env` (ya incluidos en `.gitignore`)
- Documenta las variables de entorno requeridas en los README de los proyectos
- 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
### Proyectos en Python
### Proyectos Python
- Usa entornos virtuales: `python -m venv venv`
- Mantén las dependencias actualizadas
- Usa entornos virtuales: `python -m venv venv`
- Mantén las dependencias actualizadas
- Los tokens de GitHub deben tener permisos mínimos requeridos
### Acceso a GitHub Models
- Se requieren Tokens de Acceso Personal (PAT) para GitHub Models
- Los tokens deben almacenarse como variables de entorno
- Se requieren Tokens de Acceso Personal (PAT) para GitHub Models
- Los tokens deben ser almacenados como variables de entorno
- Nunca comprometas tokens o credenciales
## Notas Adicionales
### Público Objetivo
### Audiencia Objetivo
- Principiantes completos en desarrollo web
- Estudiantes y autodidactas
- Profesores usando el currículo en aulas
- Contenido diseñado para accesibilidad y construcción gradual de habilidades
- 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
### Filosofía Educativa
- Enfoque de aprendizaje basado en proyectos
- Comprobaciones frecuentes de conocimiento (cuestionarios)
- Ejercicios prácticos de codificación
- Ejemplos de aplicación en el mundo real
- Enfoque en fundamentos antes de frameworks
- 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
### Mantenimiento del Repositorio
- Comunidad activa de estudiantes y contribuidores
- Actualizaciones regulares de dependencias y contenido
- Issues y discusiones monitoreadas por mantenedores
- Actualizaciones de traducción automatizadas mediante GitHub Actions
- 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
### Recursos Relacionados
- [Módulos de Microsoft Learn](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: IA generativa, ciencia de datos, ML, curricula de IoT disponibles
- [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
### Trabajo con Proyectos Específicos
### Trabajando con Proyectos Específicos
Para instrucciones detalladas sobre proyectos individuales, consulta los archivos README en:
- `quiz-app/README.md` - Aplicación de quizzes en Vue 3
- `7-bank-project/README.md` - Aplicación bancaria con autenticación
- `5-browser-extension/README.md` - Desarrollo de extensión de navegador
- `6-space-game/README.md` - Desarrollo de juego basado en canvas
- `9-chat-project/README.md` - Proyecto de asistente de chat IA
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
- `9-chat-project/README.md` - Proyecto asistente de chat AI
### Estructura de Monorepo
### Estructura del 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 a otros
- Clona todo el repositorio para 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
- Trabaja en proyectos individuales sin afectar otros
- Clona todo el repositorio para obtener la experiencia completa del currículo
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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 lograr 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 ningún malentendido o interpretación errónea que resulte del uso de esta traducción.
**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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

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

@ -1,13 +1,13 @@
# AGENTS.md
## Aperçu du projet
## Présentation du projet
Il s'agit d'un référentiel de programme éducatif pour enseigner les bases du développement web aux débutants. Le programme est un cours complet de 12 semaines développé par les Microsoft Cloud Advocates, comprenant 24 leçons pratiques couvrant JavaScript, CSS et HTML.
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.
### 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
- **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 automatisées pour plus de 50 langues via GitHub Actions
- **Technologies** : HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (pour les projets IA)
@ -15,12 +15,12 @@ Il s'agit d'un référentiel de programme éducatif pour enseigner les bases du
### 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 autonomes dans des répertoires séparés (quiz-app, divers projets de leçon)
- 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)
- Système de traduction utilisant GitHub Actions (co-op-translator)
- Documentation servie via Docsify et disponible en PDF
## Commandes dinstallation
## Commandes d'installation
Ce référentiel est principalement destiné à la consommation de contenu éducatif. Pour travailler avec des projets spécifiques :
@ -51,23 +51,23 @@ npm run lint # Exécuter ESLint
npm run format # Formater avec Prettier
```
### Projets dextensions de navigateur
### Projets dextension de navigateur
```bash
cd 5-browser-extension/solution
npm install
# Suivre les instructions de chargement des extensions spécifiques au navigateur
# Suivez les instructions spécifiques au navigateur pour le chargement des extensions
```
### Projets du jeu spatial
### Projets de jeu spatial
```bash
cd 6-space-game/solution
npm install
# Ouvrez index.html dans le navigateur ou utilisez Live Server
# Ouvrez index.html dans un navigateur ou utilisez Live Server
```
### Projet de chat (backend Python)
### Projet de chat (Backend Python)
```bash
cd 9-chat-project/solution/backend/python
@ -81,98 +81,98 @@ python api.py
### Pour les contributeurs de contenu
1. **Forkez le référentiel** sur votre compte GitHub
2. **Clonez votre fork** localement
2. **Cloner votre fork** localement
3. **Créez une nouvelle branche** pour vos modifications
4. Modifiez le contenu des leçons ou les exemples de code
5. Testez les modifications de code dans les répertoires de projets concernés
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
### Pour les apprenants
1. Forkez ou clonez le référentiel
2. Parcourez les dossiers de leçon dans lordre
3. Lisez les fichiers README de chaque leçon
4. Complétez les quiz pré-lesson sur https://ff-quizzes.netlify.app/web/
5. Travaillez les exemples de code dans les dossiers de leçon
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-lesson
7. Passez les quiz post-leçon
### Développement en direct
- **Documentation** : Lancez `docsify serve` à la racine (port 3000)
- **Application Quiz** : Lancez `npm run dev` dans le répertoire quiz-app
- **Quiz App** : Lancez `npm run dev` dans le répertoire quiz-app
- **Projets** : Utilisez lextension Live Server de VS Code pour les projets HTML
- **Projets API** : Lancez `npm start` dans les répertoires API respectifs
## Instructions de test
### Test de lapplication Quiz
### Tests de lapplication Quiz
```bash
cd quiz-app
npm run lint # Vérifiez les problèmes de style de code
npm run build # Vérifiez que la compilation réussit
npm run lint # Vérifier les problèmes de style de code
npm run build # Vérifier que la compilation réussit
```
### Test de lAPI bancaire
### Tests de lAPI bancaire
```bash
cd 7-bank-project/api
npm run lint # Vérifier les problèmes de style de code
node server.js # Vérifier que le serveur démarre sans erreurs
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
- Il sagit dun référentiel éducatif sans tests automatisés complets
- Les tests manuels portent sur :
- Les exemples de code sexécutent sans erreur
- Ce référentiel éducatif ne comporte pas de 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 constructions des projets sachèvent avec succès
- Les builds des projets sexécutent avec succès
- Les exemples respectent les bonnes pratiques
### Vérifications avant soumission
- Lancez `npm run lint` dans les répertoires contenant package.json
- Vérifiez la validité des liens markdown
- Lancez `npm run lint` dans les dossiers contenant package.json
- Vérifiez que les liens markdown sont valides
- Testez les exemples de code dans le navigateur ou Node.js
- Vérifiez que les traductions conservent la structure correcte
- Vérifiez que les traductions maintiennent la structure adéquate
## Directives de style de code
### JavaScript
- Utilisez la syntaxe moderne ES6+
- Suivez les configurations ESLint standards fournies dans les projets
- 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 là où il est configuré
- Formatez avec Prettier lorsque configuré
### HTML/CSS
- Éléments HTML5 sémantiques
- Principes de conception responsive
- Conventions claires de noms de classes
- Principes de design responsive
- Conventions claires de nommage de classes
- Commentaires expliquant les techniques CSS pour les apprenants
### Python
- Directives de style PEP 8
- Exemples de code clairs et éducatifs
- Indications de types lorsque cela aide à lapprentissage
- Exemples de code clairs et pédagogiques
- Annotations de type lorsque cela aide à lapprentissage
### Documentation Markdown
- Hiérarchie claire des titres
- Blocs de code avec spécification de langue
- Blocs de code avec spécification du langage
- Liens vers des ressources supplémentaires
- Captures décran et images dans les dossiers `images/`
- Texte alternatif pour les images pour laccessibilité
### Organisation des fichiers
- Leçons numérotées dans lordre (1-getting-started-lessons, 2-js-basics, etc.)
- Chaque projet possède des dossiers `solution/` et souvent `start/` ou `your-work/`
- 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}/`
@ -180,7 +180,7 @@ node server.js # Vérifier que le serveur démarre sans erreurs
### Déploiement de lapplication Quiz (Azure Static Web Apps)
Lapplication quiz-app est configurée pour un déploiement sur Azure Static Web Apps :
Lapplication quiz-app est configurée pour le déploiement sur Azure Static Web Apps :
```bash
cd quiz-app
@ -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 PDF de la documentation
### Génération de fichier PDF de la documentation
```bash
npm install # Installer docsify-to-pdf
@ -211,68 +211,68 @@ docsify serve # Servir sur localhost:3000
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, sert les fichiers directement
- Projets statiques : Pas détape de build, les fichiers sont servis directement
## Directives pour les pull requests
### Format des titres
### Format du titre
Utilisez des titres clairs et descriptifs indiquant la zone de changement :
Utilisez des titres clairs et descriptifs indiquant le domaine de changement :
- `[Quiz-app] Ajouter un nouveau quiz pour la leçon X`
- `[Lesson-3] Corriger une faute dans le projet terrarium`
- `[Translation] Ajouter une traduction espagnole pour la leçon 5`
- `[Docs] Mettre à jour les instructions dinstallation`
- `[Lesson-3] Correction dune faute dans le projet terrarium`
- `[Translation] Ajout de la traduction espagnole pour la leçon 5`
- `[Docs] Mise à jour des instructions dinstallation`
### Vérifications obligatoires
### Vérifications requises
Avant de soumettre une PR :
1. **Qualité du code** :
- Lancez `npm run lint` dans les répertoires des projets concernés
- Corrigez toutes les erreurs et avertissements lint
- Lancez `npm run lint` dans les répertoires projet affectés
- Corrigez toutes les erreurs et avertissements
2. **Vérification du build** :
- Lancez `npm run build` si applicable
- Assurez-vous quaucune erreur de build ne survient
- Assurez-vous quil ny a pas derreurs de build
3. **Validation des liens** :
- Testez tous les liens markdown
- Vérifiez les références dimages fonctionnelles
- Vérifiez que les références dimages fonctionnent
4. **Relecture de contenu** :
- Vérifiez lorthographe et la grammaire
4. **Revue du contenu** :
- Relisez pour lorthographe et la grammaire
- Assurez-vous que les exemples de code sont corrects et pédagogiques
- Vérifiez que les traductions respectent le sens original
- Vérifiez que les traductions conservent le sens original
### Exigences de contribution
- Accepter la CLA Microsoft (vérification automatisée à la première PR)
- Suivre le [Code de conduite open source de Microsoft](https://opensource.microsoft.com/codeofconduct/)
- 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érencer les numéros dissues dans la description de PR si applicable
- Référencez les numéros de tickets dans la description de la PR si applicable
### Processus de revue
- PRs revues par les mainteneurs et la communauté
- 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 contrôlées pour la précision et ladéquation culturelle
- Les traductions sont revues pour leur exactitude et adaptation culturelle
## Système de traduction
### Traduction automatisée
- Utilise GitHub Actions avec le workflow co-op-translator
- Traduit automatiquement vers plus de 50 langues
- Traduit automatiquement en plus de 50 langues
- Fichiers sources dans les répertoires principaux
- Fichiers traduits dans `translations/{code-langue}/`
- Fichiers traduits dans les répertoires `translations/{code-langue}/`
### Ajout daméliorations manuelles de traduction
1. Localisez le fichier dans `translations/{code-langue}/`
2. Apportez des améliorations tout en préservant la structure
2. Effectuez les améliorations tout en préservant la structure
3. Assurez-vous que les exemples de code restent fonctionnels
4. Testez tout contenu localisé de quiz
4. Testez tout contenu de quiz localisé
### Métadonnées de traduction
@ -289,48 +289,48 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Débogage et dépannage
## Débogage et résolution de problèmes
### Problèmes courants
**Lapplication quiz ne démarre pas** :
- Vérifiez la version Node.js (v14+ recommandée)
- Supprimez `node_modules` et `package-lock.json`, relancez `npm install`
**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)
**Le serveur API ne démarre pas** :
- Vérifiez que la version Node.js est suffisante (node >=10)
- Vérifiez si le port est déjà utilisé
- Contrôlez 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 manifest.json est bien formaté
- Consultez la console du navigateur pour les erreurs
- Suivez les instructions dinstallation propres au navigateur
- 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
**Problèmes projet de chat Python** :
**Problèmes avec le projet de 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 GitHub Models
- Contrôlez les permissions daccès aux Modeles GitHub
**Docsify ne sert pas la documentation** :
- Installez docsify-cli globalement : `npm install -g docsify-cli`
- Exécutez depuis le répertoire racine du référentiel
- Lancez depuis le répertoire racine du référentiel
- Vérifiez que `docs/_sidebar.md` existe
### Astuces pour lenvironnement de développement
### 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 DevTools du navigateur pour déboguer JavaScript
- Pour les projets Vue, installez lextension Vue DevTools du navigateur
- Utilisez les outils DevTools du navigateur pour déboguer le JavaScript
- Pour les projets Vue, installez lextension Vue DevTools pour le navigateur
### Considérations de performance
- Le grand nombre de fichiers traduits (50+ langues) fait que les clones complets sont volumineux
- Utilisez un clone peu profond si vous travaillez uniquement sur le contenu : `git clone --depth 1`
- Excluez les traductions des recherches quand vous travaillez sur le contenu anglais
- Les processus de build peuvent être lents lors du premier lancement (npm install, build Vite)
- 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
- Les processus de build peuvent être lents au premier lancement (npm install, build Vite)
## Considérations de sécurité
@ -343,14 +343,14 @@ CO_OP_TRANSLATOR_METADATA:
### Projets Python
- Utilisez des environnements virtuels : `python -m venv venv`
- Gardez les dépendances à jour
- Les tokens GitHub doivent avoir les permissions minimales nécessaires
- Maintenez les dépendances à jour
- Les tokens GitHub doivent posséder les permissions minimales requises
### Accès aux GitHub Models
### Accès aux modèles GitHub
- Les Personal Access Tokens (PAT) sont requis pour GitHub Models
- Les tokens doivent être stockés dans des variables denvironnement
- Ne jamais commettre de tokens ou didentifiants
- Tokens daccès personnels (PAT) nécessaires pour les modèles GitHub
- Les tokens doivent être stockés en variables denvironnement
- Ne jamais commettre les tokens ou les identifiants
## Notes supplémentaires
@ -358,51 +358,51 @@ CO_OP_TRANSLATOR_METADATA:
- Débutants complets en développement web
- Étudiants et autodidactes
- Enseignants utilisant le programme en classe
- Le contenu est conçu pour laccessibilité et la montée en compétences progressive
- Enseignants utilisant le programme dans les classes
- Contenu conçu pour laccessibilité et la montée en compétences progressive
### Philosophie éducative
- Approche dapprentissage par projets
- Contrôles fréquents des connaissances (quiz)
- Exercices pratiques de codage
- Exemples dapplications réelles
- Accent sur les fondamentaux avant les frameworks
- Approche par apprentissage 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
### Maintenance du référentiel
- Communauté active dapprenants et contributeurs
- Mises à jour régulières des dépendances et du contenu
- Suivi des problèmes et discussions par les mainteneurs
- Tickets et discussions surveillés par les mainteneurs
- Mises à jour des traductions automatisées via GitHub Actions
### Ressources connexes
### Ressources associées
- [Modules Microsoft Learn](https://docs.microsoft.com/learn/)
- [Ressources Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [Ressources du Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recommandé pour les apprenants
- Cours supplémentaires : IA générative, Science des données, ML, cursus IoT disponibles
- Cours complémentaires : AI générative, Data Science, ML, IoT disponibles
### Travail avec des projets spécifiques
### Travailler avec des projets spécifiques
Pour les instructions détaillées sur les projets individuels, référez-vous aux fichiers README dans :
- `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 de navigateur
- `6-space-game/README.md` - Développement de jeu sur Canvas
- `9-chat-project/README.md` - Projet assistant de chat IA
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
### Structure Monorepo
Bien que ce ne soit pas un monorepo traditionnel, ce référentiel contient plusieurs projets indépendants :
Même sil ne sagit pas dun monorepo traditionnel, ce référentiel contient plusieurs projets indépendants :
- Chaque leçon est autonome
- Les projets ne partagent pas de dépendances
- Travaillez sur des projets individuels sans impact sur les autres
- Clonez tout le référentiel pour une expérience complète du programme scolaire
- Les projets ne partagent pas les dépendances
- Travaillez sur des projets individuels sans impacter les autres
- Clonez tout le référentiel pour lexpérience complète du programme
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à laide du service de traduction automatie [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 foi. Pour des informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou de mauvaises interprétations résultant de lutilisation de cette traduction.
**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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save