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

pull/1793/head
localizeflow[bot] 4 weeks ago
parent becbe773b0
commit 9841823f1c

@ -487,7 +487,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-06T15:24:53+00:00",
"translation_date": "2026-04-20T15:26:56+00:00",
"source_file": "AGENTS.md",
"language_code": "en"
},

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-06T15:27:05+00:00",
"translation_date": "2026-04-20T15:29:24+00:00",
"source_file": "AGENTS.md",
"language_code": "es"
},

@ -2,14 +2,14 @@
## Descripción del Proyecto
Este es un repositorio de currículo educativo para enseñar fundamentos del desarrollo web a principiantes. El currículo es un curso comprensivo de 12 semanas desarrollado por Microsoft Cloud Advocates, que cuenta con 24 lecciones prácticas cubriendo JavaScript, CSS y HTML.
Este es un repositorio educativo para enseñar los fundamentos del desarrollo web a principiantes. El currículum 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 Mecanografía, Extensión de Navegador, Juego Espacial, Aplicación Bancaria, Editor de Código y Asistente de Chat con IA
- **Cuestionarios Interactivos**: 48 cuestionarios con 3 preguntas cada uno (evaluaciones pre/post-lección)
- **Soporte Multilenguaje**: Traducciones automáticas para más de 50 idiomas mediante GitHub Actions
- **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 con IA
- **Cuestionarios Interactivos**: 48 cuestionarios con 3 preguntas cada uno (evaluaciones pre y post lección)
- **Soporte Multilenguaje**: Traducciones automáticas en más de 50 idiomas vía GitHub Actions
- **Tecnologías**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para proyectos de IA)
### Arquitectura
@ -18,11 +18,11 @@ Este es un repositorio de currículo educativo para enseñar fundamentos del des
- 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 via Docsify y disponible en formato PDF
- 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 consumo de contenido educativo. Para trabajar con proyectos específicos:
### Configuración Principal del Repositorio
@ -37,21 +37,21 @@ cd Web-Dev-For-Beginners
cd quiz-app
npm install
npm run dev # Iniciar servidor de desarrollo
npm run build # Compilar para producción
npm run build # Construir para producción
npm run lint # Ejecutar ESLint
```
### API del Proyecto Bancario (Node.js + Express)
### API para Proyecto Bancario (Node.js + Express)
```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
```
### Proyectos de Extensión de Navegador
### Proyectos de Extensión para Navegador
```bash
cd 5-browser-extension/solution
@ -59,7 +59,7 @@ npm install
# Sigue las instrucciones específicas del navegador para cargar extensiones
```
### Proyectos del Juego Espacial
### Proyectos de Juego Espacial
```bash
cd 6-space-game/solution
@ -76,35 +76,35 @@ pip install openai
python api.py
```
## Flujo de Trabajo de Desarrollo
## Flujo de Desarrollo
### Para Colaboradores de Contenido
### 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 proyecto relevantes
6. Envía pull requests siguiendo las pautas de contribución
1. **Hacer fork del repositorio** a tu cuenta de GitHub
2. **Clonar tu fork** localmente
3. **Crear una nueva rama** para tus cambios
4. Realizar cambios en contenido de lecciones o ejemplos de código
5. Probar cualquier cambio de código en los directorios de proyectos relevantes
6. Enviar pull requests siguiendo las directrices de contribución
### Para Estudiantes
1. Haz fork o clona el repositorio
2. Navega secuencialmente por los directorios de 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 lecciones
6. Completa las tareas y desafíos
7. Realiza los cuestionarios posteriores a la lección
1. Hacer fork o clonar el repositorio
2. Navegar secuencialmente por los directorios de lecciones
3. Leer los archivos README de cada lección
4. Completar cuestionarios pre-lección en https://ff-quizzes.netlify.app/web/
5. Trabajar con ejemplos de código en las carpetas de las lecciones
6. Completar tareas y desafíos
7. Realizar cuestionarios post-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
- **Proyectos API**: Ejecuta `npm start` en los directorios API respectivos
- **Documentación**: Ejecutar `docsify serve` en la raíz (puerto 3000)
- **Quiz App**: Ejecutar `npm run dev` en el directorio quiz-app
- **Proyectos**: Usar extensión Live Server de VS Code para proyectos HTML
- **Proyectos API**: Ejecutar `npm start` en los directorios API respectivos
## Instrucciones de Pruebas
## Instrucciones para Pruebas
### Pruebas de Quiz App
@ -114,7 +114,7 @@ npm run lint # Verificar problemas de estilo de código
npm run build # Verificar que la compilación sea exitosa
```
### Pruebas de Bank API
### Pruebas de API Bancaria
```bash
cd 7-bank-project/api
@ -124,57 +124,57 @@ node server.js # Verificar que el servidor arranque sin errores
### Enfoque General para Pruebas
- Este es un repositorio educativo sin pruebas automatizadas exhaustivas
- Las pruebas manuales se enfocan en:
- Ejecución de ejemplos de código sin errores
- Funcionamiento correcto de enlaces en la documentación
- Compilación exitosa de proyectos
- Ejemplos que siguen las mejores prácticas
- Este repositorio educativo no cuenta con 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 finalicen sin errores
- Que los ejemplos sigan las mejores prácticas
### Chequeos Previos a Envíos
### Chequeos Previo al Envío
- Ejecuta `npm run lint` en directorios con package.json
- Verifica que los enlaces de markdown sean válidos
- Prueba los ejemplos de código en navegador o Node.js
- Revisa que las traducciones mantengan la estructura correcta
- Ejecutar `npm run lint` en directorios con package.json
- Verificar que los enlaces en markdown sean válidos
- Probar ejemplos de código en navegador o Node.js
- Comprobar que las traducciones mantengan la estructura adecuada
## Guías de Estilo de Código
### JavaScript
- Usa sintaxis moderna ES6+
- Sigue configuraciones estándar ESLint proporcionadas en proyectos
- Usa nombres significativos para variables y funciones para claridad educativa
- Añade comentarios explicando conceptos para los estudiantes
- Formatea con Prettier donde esté configurado
- Usar sintaxis moderna ES6+
- Seguir configuraciones standard de ESLint proporcionadas en proyectos
- Usar nombres significativos para variables y funciones para claridad educativa
- Añadir comentarios que expliquen conceptos para los estudiantes
- Formatear usando Prettier donde esté configurado
### HTML/CSS
- Elementos HTML5 semánticos
- Elementos semánticos HTML5
- Principios de diseño responsivo
- Nomenclatura clara de clases
- Convenciones claras de nombres de clases
- Comentarios que expliquen técnicas CSS para estudiantes
### Python
- Lineamientos de estilo PEP 8
- Guías de estilo PEP 8
- Código claro y educativo
- Anotaciones de tipo cuando ayuden al aprendizaje
- Anotaciones de tipo donde sean útiles para el aprendizaje
### Documentación Markdown
### Documentación en 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 en imágenes para accesibilidad
- 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/`
- Cada proyecto tiene `solution/` y a menudo `start/` o `your-work/`
- Imágenes almacenadas en carpetas `images/` específicas por lección
- Traducciones en estructura `translations/{código-idioma}/`
- Traducciones en la estructura `translations/{language-code}/`
## Construcción y Despliegue
@ -185,15 +185,15 @@ 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 en main
```
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`
- **Flujo de trabajo**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generación de PDF de Documentación
### Generación de Documentación PDF
```bash
npm install # Instalar docsify-to-pdf
@ -207,18 +207,18 @@ npm install -g docsify-cli # Instalar Docsify globalmente
docsify serve # Servir en localhost:3000
```
### Construcciones Específicas por Proyecto
### Compilaciones específicas de proyectos
Cada directorio de proyecto puede tener su propio proceso de build:
- Proyectos Vue: `npm run build` crea bundles de producción
- Proyectos estáticos: Sin paso de construcción, se sirven archivos directamente
Cada directorio de proyecto puede tener su propio proceso de compilación:
- Proyectos Vue: `npm run build` crea paquetes para producción
- Proyectos estáticos: No tienen paso de compilación, se sirven archivos directamente
## Pautas para Pull Requests
## Directrices 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`
Usar títulos claros y descriptivos indicando la área de 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 la lección 5`
- `[Docs] Actualizar instrucciones de configuración`
@ -227,56 +227,56 @@ Usa títulos claros y descriptivos indicando el área del cambio:
Antes de enviar un PR:
1. **Calidad de Código**:
- Ejecuta `npm run lint` en directorios de proyectos afectados
- Corrige todos los errores y advertencias de linting
1. **Calidad del código**:
- Ejecutar `npm run lint` en directorios afectados
- Corregir todos los errores y advertencias de linting
2. **Verificación de Build**:
- Ejecuta `npm run build` si aplica
- Asegura que no haya errores de compilación
2. **Verificación de compilación**:
- Ejecutar `npm run build` si aplica
- Asegurar que no hay errores en la compilación
3. **Validación de Enlaces**:
- Prueba todos los enlaces markdown
- Verifica que referencias a imágenes funcionen
3. **Validación de enlaces**:
- Probar todos los enlaces markdown
- Verificar referencias de imágenes
4. **Revisión del 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**:
- Revisar ortografía y gramática
- Asegurar que ejemplos de código sean correctos y educativos
- Verificar que las traducciones mantengan el significado original
### Requisitos de Contribución
### Requisitos para Contribuir
- Aceptar el CLA de Microsoft (revisión automática en el primer PR)
- Aceptar Microsoft CLA (verificación automática en 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 issue en la descripción del PR si aplica
- Referenciar números de issues en la descripción del PR si aplica
### Proceso de Revisión
- PR revisados por mantenedores y comunidad
- Los PR son revisados por mantenedores y la comunidad
- Se prioriza la claridad educativa
- Los ejemplos de código deben seguir las mejores prácticas actuales
- Traducciones revisadas para precisión y adecuación cultural
- Los ejemplos de código deben seguir mejores prácticas actuales
- Las traducciones se revisan para exactitud y adecuación cultural
## Sistema de Traducción
### Traducción Automatizada
### Traducción Automática
- Usa GitHub Actions con workflow co-op-translator
- Usa GitHub Actions con el 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}/`
- Archivos traducidos en `translations/{language-code}/`
### Agregar Mejoras Manuales a Traducciones
### Agregar Mejoras Manuales de Traducción
1. Ubica el archivo en `translations/{código-idioma}/`
2. Haz mejoras preservando la estructura
3. Asegura que los ejemplos de código sigan funcionando
4. Prueba cualquier contenido localizado de cuestionarios
1. Localizar archivo en `translations/{language-code}/`
2. Mejorar manteniendo la estructura
3. Asegurar que los ejemplos de código sigan funcionando
4. Probar cualquier cuestionario localizado
### Metadatos de Traducción
Los archivos traducidos incluyen encabezado con metadatos:
Los archivos traducidos incluyen encabezado de metadatos:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Problemas Comunes
**Quiz app no arranca**:
- Verifica la versión de Node.js (recomendada v14+)
- Elimina `node_modules` y `package-lock.json`, ejecuta `npm install` de nuevo
- Revisa conflictos de puertos (por defecto: Vite usa el puerto 5173)
**La app de cuestionarios no arranca**:
- Verificar versión de Node.js (recomendada v14+)
- Eliminar `node_modules` y `package-lock.json`, ejecutar de nuevo `npm install`
- Revisar conflictos de puertos (por defecto: Vite usa puerto 5173)
**Servidor API no inicia**:
- Confirma que la versión de Node.js cumple el mínimo (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 sea compatible (node >=10)
- Comprobar si el puerto está en uso
- Asegurar que todas las dependencias estén instaladas con `npm install`
**Extensión de navegador no carga**:
- Verifica que manifest.json esté correctamente formateado
- Revisa la consola del navegador por errores
- Sigue las instrucciones específicas de instalación para el navegador
**La extensión del navegador no carga**:
- Verificar que el manifest.json esté bien formado
- Revisar la consola del navegador para errores
- Seguir instrucciones específicas del navegador para instalar extensiones
**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
- Revisa permisos de acceso a GitHub Models
**Problemas con el proyecto de chat en Python**:
- Asegurar que el paquete OpenAI esté instalado: `pip install openai`
- Verificar que la variable de entorno GITHUB_TOKEN esté configurada
- Comprobar 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
- Confirma que existe `docs/_sidebar.md`
- Instalar docsify-cli globalmente: `npm install -g docsify-cli`
- Ejecutar desde el directorio raíz del repositorio
- Confirmar 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
- Usa las DevTools del navegador para depurar JavaScript
- Para proyectos Vue, instala la extensión de navegador Vue DevTools
- Usar VS Code con 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 extensión Vue DevTools para navegador
### Consideraciones de Rendimiento
- Gran cantidad de archivos traducidos (más de 50 idiomas) hace que los clones completos sean grandes
- Usa clonación superficial si solo trabajas con contenido: `git clone --depth 1`
- Excluye traducciones de búsquedas cuando trabajes con contenido en inglés
- Los procesos de build pueden ser lentos en la primera ejecución (npm install, build con Vite)
- Gran cantidad de archivos traducidos (más de 50 idiomas) hace que clonaciones completas sean grandes
- Usar clonación superficial si solo se trabaja con contenido: `git clone --depth 1`
- Excluir traducciones de búsquedas al trabajar con contenido en inglés
- Los procesos de compilación pueden ser lentos en la primera ejecución (npm install, compilación Vite)
## Consideraciones de Seguridad
### Variables de Entorno
- Las claves API nunca deberían ser comprometidas en el repositorio
- Usa archivos `.env` (ya en `.gitignore`)
- Documenta las variables de entorno requeridas en los README de proyectos
- Las claves API nunca deben subirse al repositorio
- Usar archivos `.env` (ya incluidos en `.gitignore`)
- Documentar variables de entorno necesarias en los READMEs de los proyectos
### Proyectos Python
### Proyectos en Python
- Usa entornos virtuales: `python -m venv venv`
- Mantén 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
- Se requieren Personal Access Tokens (PAT) para GitHub Models
- Guarda los tokens como variables de entorno
- Nunca cometas tokens ni credenciales
- Se requieren Tokens de Acceso Personal (PAT) para GitHub Models
- Los tokens deben almacenarse como variables de entorno
- Nunca subir tokens o credenciales al repositorio
## Notas Adicionales
### Público Objetivo
- Principiantes absolutos en desarrollo web
- Principiantes completos en desarrollo web
- Estudiantes y autodidactas
- Profesores usando el currículo en aulas
- Profesores que usan el currículum en aulas
- Contenido diseñado para accesibilidad y desarrollo gradual de habilidades
### Filosofía Educativa
- Enfoque de aprendizaje basado en proyectos
- Revisiones frecuentes de conocimientos (cuestionarios)
- Enfoque basado en aprendizaje por proyectos
- Chequeos frecuentes de conocimiento (cuestionarios)
- Ejercicios prácticos de codificación
- Ejemplos de aplicación en el mundo real
- Enfoque en fundamentos antes de frameworks
- Ejemplos de aplicaciones del mundo real
- Enfoque en fundamentos antes que frameworks
### Mantenimiento del Repositorio
- Comunidad activa de aprendices y colaboradores
- Actualizaciones regulares de dependencias y contenidos
- Monitoreo de issues y discusiones por mantenedores
- Actualizaciones de traducción automatizadas mediante GitHub Actions
- Comunidad activa de aprendices y contribuyentes
- Actualizaciones regulares en 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 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: Currículos de IA generativa, Ciencia de Datos, ML, IoT disponibles
- [Módulos Microsoft Learn](https://docs.microsoft.com/learn/)
- [Recursos para estudiantes hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para aprendices
- Cursos adicionales: IA generativa, Ciencia de datos, ML, currículos IoT disponibles
### 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
Para instrucciones detalladas de proyectos individuales, consultar los archivos README en:
- `quiz-app/README.md` - aplicación de cuestionarios 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 con canvas
- `9-chat-project/README.md` - proyecto asistente de chat con IA
- `6-space-game/README.md` - desarrollo de juego en canvas
- `9-chat-project/README.md` - proyecto de asistente de chat IA
### Estructura Monorepo
Aunque no es un monorepo tradicional, este repositorio contiene múltiples proyectos independientes:
- Cada lección es autocontenida
- Cada lección es autónoma
- Los proyectos no comparten dependencias
- Trabaja en proyectos individuales sin afectar otros
- Clona el repositorio completo para la experiencia completa del currículo
- Se puede trabajar en proyectos individuales sin afectar otros
- Clonar el repositorio completo para experiencia completa del currículum
---
<!-- 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 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 malentendidos o interpretaciones erróneas que surjan 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 la precisión, tenga en cuenta que las traducciones automatizadas 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 humana. No nos hacemos responsables de 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-04-06T15:26:01+00:00",
"translation_date": "2026-04-20T15:28:11+00:00",
"source_file": "AGENTS.md",
"language_code": "fr"
},

@ -1,24 +1,24 @@
# AGENTS.md
## Aperçu du projet
## Présentation 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 les 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
- **Quiz interactifs** : 48 quiz avec 3 questions chacun (évaluations avant/après les leçons)
- **Support multilingue** : traductions automatisées en 50+ langues via GitHub Actions
- **Technologies** : HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (pour les projets IA)
- **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 pré/post- leçon)
- **Support multilingue** : Traductions automatiques en 50+ langues via GitHub Actions
- **Technologies** : HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (pour projets IA)
### Architecture
- Référentiel éducatif avec une 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çon)
- Système de traduction utilisant GitHub Actions (co-op-translator)
- Documentation servie via Docsify et disponible en PDF
- Référentiel éducatif avec structure basée sur les leçons
- Chaque dossier de leçon contient README, exemples de code, et 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 d'installation
@ -31,13 +31,13 @@ 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 l'application Quiz (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Démarrer le serveur de développement
npm run build # Compiler pour la production
npm run build # Construire pour la production
npm run lint # Exécuter ESLint
```
@ -59,7 +59,7 @@ npm install
# Suivez les instructions spécifiques au navigateur pour le chargement des extensions
```
### Projets de jeux spatiaux
### Projets de jeu spatial
```bash
cd 6-space-game/solution
@ -67,7 +67,7 @@ npm install
# 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
@ -80,33 +80,33 @@ python api.py
### Pour les contributeurs de contenu
1. **Forkez le référentiel** sur votre compte GitHub
2. **Clonez votre fork** localement
3. **Créez une nouvelle branche** pour vos modifications
4. Effectuez des modifications dans le contenu des leçons ou les exemples de code
5. Testez les modifications de code dans les répertoires de projets concernés
6. Soumettez des pull requests selon les directives de contribution
1. **Forkez le référentiel** vers votre compte GitHub
2. **Clonez 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
6. Soumettez des pull requests en suivant les consignes de contribution
### Pour les apprenants
1. Forkez ou clonez le référentiel
2. Naviguez séquentiellement dans les dossiers de leçon
3. Lisez les fichiers README pour chaque leçon
4. Complétez les quiz avant la leçon à https://ff-quizzes.netlify.app/web/
5. Travaillez sur les exemples de code dans les dossiers des leçons
6. Réalisez les devoirs et défis
7. Passez les quiz après la leçon
1. Forkez ou clonez le référentiel
2. Naviguez dans les dossiers de leçons dans l'ordre
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 les exemples de code dans les dossiers de leçons
6. Réalisez les devoirs et défis
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 dossier 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
- **Documentation** : Lancez `docsify serve` à la racine (port 3000)
- **Application Quiz** : 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 concernés
## Instructions de test
### Test de lapplication Quiz
### Test de l'application Quiz
```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
```
### Test de lAPI bancaire
### Test de l'API bancaire
```bash
cd 7-bank-project/api
@ -124,63 +124,63 @@ node server.js # Vérifiez que le serveur démarre sans erreurs
### Approche générale des tests
- Il sagit dun référentiel éducatif sans tests automatisés complets
- Les tests manuels se concentrent sur :
- Exécution des exemples de code sans erreurs
- Fonctionnement correct des liens dans la documentation
- Succès des compilations des projets
- Respect des bonnes pratiques dans les exemples
- Il s'agit d'un référentiel éducatif sans tests automatisés exhaustifs
- Les tests manuels portent sur :
- Exécution des exemples de code sans erreurs
- Fonctionnement correct des liens dans la documentation
- Compilation réussie des projets
- Respect des bonnes 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
- Testez les exemples de code dans un navigateur ou Node.js
- Assurez-vous que les traductions conservent la structure correcte
- Lancez `npm run lint` dans les dossiers contenant 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 conservent la structure appropriée
## Directives de style de code
### JavaScript
- Utilisez la syntaxe moderne ES6+
- Suivez les configurations ESLint standard fournies dans les projets
- Utilisez des noms de variables et de fonctions significatifs pour la clarté éducative
- Ajoutez des commentaires expliquant les concepts pour les apprenants
- Formatez avec Prettier là où configuré
- Utilisez la syntaxe moderne ES6+
- Respectez 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 si configuré
### HTML/CSS
- Éléments HTML5 sémantiques
- Principes de design responsive
- Conventions claires de nommage des classes
- Commentaires expliquant les techniques CSS pour les apprenants
- Utilisez des éléments HTML5 sémantiques
- Appliquez des principes de design responsive
- Nommez clairement les classes
- Ajoutez des commentaires expliquant les techniques CSS pour les apprenants
### Python
- Directives de style PEP 8
- Exemples de code clairs et éducatifs
- Annotations de types là où cest utile pour lapprentissage
- Suivez les directives de style PEP 8
- Exemples de code clairs et pédagogiques
- Indications de type lorsque cela aide l'apprentissage
### Documentation Markdown
- Hiérarchie claire des titres
- Blocs de code avec spécification de langage
- Liens vers des ressources supplémentaires
- Captures décran et images dans les dossiers `images/`
- Texte alternatif pour les images pour laccessibilité
- Hiérarchie claire des titres
- Blocs de code avec spécification du langage
- Liens vers des ressources complé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 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 des dossiers `images/` spécifiques aux leçons
- Traductions dans la structure `translations/{language-code}/`
- Leçons numérotées séquentiellement (1-getting-started-lessons, 2-js-basics, etc.)
- Chaque projet a les dossiers `solution/` et souvent `start/` ou `your-work/`
- Images stockées dans des dossiers `images/` spécifiques aux leçons
- Traductions dans la structure `translations/{code-langue}/`
## Construction et déploiement
## Compilation et déploiement
### Déploiement de lapplication Quiz (Azure Static Web Apps)
### Déploiement de l'application Quiz (Azure Static Web Apps)
Lapplication quiz est configurée pour un déploiement sur Azure Static Web Apps :
L'application quiz-app est configurée pour le déploiement avec Azure Static Web Apps :
```bash
cd quiz-app
@ -188,12 +188,12 @@ npm run build # Crée le dossier dist/
# Déploie via le workflow GitHub Actions lors d'un push sur main
```
Configuration Azure Static Web Apps :
- **Emplacement de lappli** : `/quiz-app`
- **Emplacement de sortie** : `dist`
- **Workflow** : `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Configuration Azure Static Web Apps :
- **Emplacement de l'application** : `/quiz-app`
- **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 du PDF de documentation
```bash
npm install # Installer docsify-to-pdf
@ -207,76 +207,76 @@ npm install -g docsify-cli # Installer Docsify globalement
docsify serve # Servir sur localhost:3000
```
### Builds spécifiques par projet
### Builds spécifiques aux projets
Chaque répertoire de projet peut avoir son propre processus de build :
- Projets Vue : `npm run build` crée les bundles de production
- Projets statiques : pas détape de build, fichiers servis directement
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, fichiers servis directement
## Directives des pull requests
## Directives pour les pull requests
### Format du titre
Utilisez des titres clairs et descriptifs indiquant la zone de changement :
- `[Quiz-app] Ajouter un nouveau quiz pour la leçon X`
- `[Lesson-3] Corriger une faute dans le projet terrarium`
- `[Translation] Ajouter la traduction espagnole pour la leçon 5`
- `[Docs] Mettre à jour les instructions dinstallation`
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 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 requises
Avant de soumettre une PR :
Avant de soumettre une PR :
1. **Qualité du code** :
- Lancez `npm run lint` dans les dossiers projets concernés
- Corrigez toutes erreurs et avertissements de lint
1. **Qualité du code** :
- Lancez `npm run lint` dans les répertoires de projet concernés
- Corrigez toutes les erreurs et avertissements de lint
2. **Vérification de build** :
- Lancez `npm run build` si applicable
- Assurez-vous quil ny a pas derreurs de build
2. **Vérification de build** :
- Lancez `npm run build` si applicable
- Assurez-vous quaucune erreur de build ne survient
3. **Validation des liens** :
- Testez tous les liens markdown
- Vérifiez que les références aux images fonctionnent
3. **Validation des liens** :
- Testez tous les liens markdown
- Vérifiez le bon fonctionnement des références aux images
4. **Relecture du contenu** :
- Vérifiez 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
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
### Exigences de contribution
- Accepter la CLA Microsoft (vérification automatisée à la première PR)
- Suivre le [Code de Conduite Open Source 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 la PR si applicable
- Acceptez la CLA Microsoft (vérification automatique à la première PR)
- Respectez le [Code de conduite open source Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Consultez le [CONTRIBUTING.md](./CONTRIBUTING.md) pour les détails
- Référencez les numéros dissues dans la description de la PR si applicable
### Processus de revue
### Processus de relecture
- PRs examinées par les mainteneurs et la communauté
- La clarté éducative est priorisée
- Les exemples de code doivent suivre les meilleures pratiques actuelles
- Les traductions sont revues pour précision et adéquation culturelle
- Les PR sont revues par les mainteneurs et la communauté
- La clarté pédagogique est priorisée
- Les exemples de code doivent suivre les bonnes pratiques actuelles
- Les traductions sont revues 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 50+ langues
- Fichiers source dans les répertoires principaux
- Fichiers traduits dans les dossiers `translations/{language-code}/`
- Utilise GitHub Actions avec le workflow co-op-translator
- Traduit automatiquement en 50+ langues
- Fichiers source dans les répertoires principaux
- Fichiers traduits dans `translations/{code-langue}/`
### Ajout daméliorations manuelles
### Ajout daméliorations manuelles aux traductions
1. Localisez le fichier dans `translations/{language-code}/`
2. Effectuez des améliorations en conservant la structure
3. Assurez-vous que les exemples de code restent fonctionnels
4. Testez tout contenu localisé de quiz
1. Localisez le fichier dans `translations/{code-langue}/`
2. Apportez des améliorations tout en préservant la structure
3. Assurez-vous que les exemples de code restent fonctionnels
4. Testez tout contenu de quiz localisé
### Métadonnées des traductions
Les fichiers traduits incluent un en-tête de métadonnées :
Les fichiers traduits incluent un en-tête de métadonnées :
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Problèmes courants
**Lapplication quiz ne démarre pas** :
- Vérifiez la version de Node.js (v14+ recommandée)
- Supprimez `node_modules` et `package-lock.json`, lancez `npm install` à nouveau
- 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é)
- Supprimez `node_modules` et `package-lock.json`, puis lancez `npm install` à nouveau
- 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 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`
**Le serveur API ne démarre pas** :
- Vérifiez que Node.js est à la version minimale (node >=10)
- Vérifiez si le port est déjà utilisé
- Assurez-vous que toutes les dépendances sont installées via `npm install`
**Lextension de navigateur ne se charge pas** :
- Vérifiez que manifest.json est correctement formaté
- Contrôlez la console du navigateur pour les erreurs
- Suivez les instructions dinstallation spécifiques au navigateur
**Lextension navigateur ne charge pas** :
- Vérifiez que manifest.json est bien formatté
- Consultez la console du navigateur pour les erreurs
- Suivez les instructions dinstallation spécifiques au navigateur
**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
- Vérifiez les autorisations daccès aux modèles GitHub
**Problèmes du 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
- Vérifiez les autorisations daccès aux modèles GitHub
**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
- Vérifiez que `docs/_sidebar.md` existe
**Docsify ne sert pas la documentation** :
- Installez docsify-cli globalement : `npm install -g docsify-cli`
- 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 DevTools du navigateur pour déboguer JavaScript
- Pour les projets Vue, installez lextension Vue DevTools pour navigateur
- 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 pour navigateur
### Considérations de performance
- Le grand nombre de fichiers traduits (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 lorsque vous travaillez sur le contenu anglais
- Les processus de build peuvent être lents au premier lancement (npm install, build Vite)
- Le grand nombre de fichiers traduits (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 anglais
- Les processus de build peuvent être lents lors de la première exécution (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
- Utilisez des fichiers `.env` (déjà dans `.gitignore`)
- Documentez les variables denvironnement requises dans les README des projets
- Les clés API ne doivent jamais être commises dans le référentiel
- Utilisez des fichiers `.env` (déjà dans `.gitignore`)
- Documentez les variables denvironnement requises dans les README projets
### Projets Python
- Utilisez des environnements virtuels : `python -m venv venv`
- Maintenez les dépendances à jour
- Les tokens GitHub doivent avoir les permissions minimales requises
- Utilisez des environnements virtuels : `python -m venv venv`
- Gardez les dépendances à jour
- Les tokens GitHub doivent avoir les permissions minimales nécessaires
### Accès aux modèles GitHub
- Les tokens daccès personnel (PAT) sont requis pour les modèles GitHub
- Les tokens doivent être stockés comme variables denvironnement
- Ne jamais commettre les tokens ou les identifiants
- Tokens daccès personnel (PAT) requis pour les modèles GitHub
- Les tokens doivent être stockés en variables denvironnement
- Ne jamais commettre de tokens ou didentifiants
## Notes supplémentaires
### Public cible
- Débutants complets au développement web
- Étudiants et autodidactes
- Enseignants utilisant le programme en classe
- Le contenu est conçu pour laccessibilité et un apprentissage progressif
- Débutants complets au développement web
- Étudiants et autodidactes
- Enseignants utilisant le programme en classe
- Contenu conçu pour laccessibilité et le développement progressif des compétences
### Philosophie éducative
- Approche dapprentissage par projet
- Vérifications fréquentes des connaissances (quiz)
- Exercices pratiques de codage
- Exemples dapplication dans des cas réels
- Focus sur les fondamentaux avant les frameworks
- Approche par projets
- Vérifications fréquentes des connaissances (quiz)
- Exercices pratiques de programmation
- Exemples dapplications réelles
- Focus sur les fondamentaux avant les frameworks
### Maintenance du référentiel
- Communauté active dapprenants et de contributeurs
- Mises à jour régulières des dépendances et du contenu
- Suivi des issues et discussions par les mainteneurs
- Mises à jour des traductions automatisées via GitHub Actions
- Communauté active dapprenants et contributeurs
- Mises à jour régulières des dépendances et du contenu
- Surveillance des issues et discussions par les mainteneurs
- Mises à jour de 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/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recommandé pour les apprenants
- Cours supplémentaires : IA générative, Data Science, ML, IoT disponibles
- [Modules Microsoft Learn](https://docs.microsoft.com/learn/)
- [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 additionnels : IA générative, Data Science, ML, IoT disponibles
### Travail avec des projets spécifiques
### 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
Pour des instructions détaillées sur les projets individuels, consultez les 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 navigateur
- `6-space-game/README.md` - développement de jeu Canvas
- `9-chat-project/README.md` - projet assistant chat IA
### Structure Monorepo
Bien que ce ne soit pas un monorepo traditionnel, ce référentiel contient plusieurs projets indépendants :
- Chaque leçon est autonome
- Les projets ne partagent pas leurs dépendances
- Travaillez sur des projets individuels sans impacter les autres
- Clonez le référentiel complet pour lexpérience du programme complet
Bien que ce ne soit pas un 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 impacter les autres
- Clonez le référentiel 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 efforçons dassurer lexactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue dorigine doit être considéré comme la source faisant autorité. Pour les informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous ne sommes pas responsables des malentendus ou des erreurs dinterprétation 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 automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue dorigine doit être considéré comme la source faisant autorité. Pour les informations critiques, une traduction professionnelle humaine est recommandée. 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