You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
6.8 KiB
130 lines
6.8 KiB
# Asignación de Investigación sobre Elementos DOM
|
|
|
|
## Visión General
|
|
|
|
Ahora que has experimentado de primera mano el poder de la manipulación del DOM, es hora de explorar el mundo más amplio de las interfaces DOM. Esta asignación profundizará tu comprensión de cómo diferentes tecnologías web interactúan con el DOM más allá de solo arrastrar elementos.
|
|
|
|
## Objetivos de Aprendizaje
|
|
|
|
Al completar esta asignación, tú:
|
|
- **Investigarás** y comprenderás en profundidad una interfaz DOM específica
|
|
- **Analizarás** implementaciones reales de manipulación DOM
|
|
- **Conectarás** conceptos teóricos con aplicaciones prácticas
|
|
- **Desarrollarás** habilidades en documentación técnica y análisis
|
|
|
|
## Instrucciones
|
|
|
|
### Paso 1: Elige Tu Interfaz DOM
|
|
|
|
Visita la completa [lista de interfaces DOM de MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) y selecciona una interfaz que te interese. Considera elegir de estas categorías para variedad:
|
|
|
|
**Opciones para Principiantes:**
|
|
- `Element.classList` - Gestión dinámica de clases CSS
|
|
- `Document.querySelector()` - Selección avanzada de elementos
|
|
- `Element.addEventListener()` - Manejo de eventos más allá de eventos de puntero
|
|
- `Window.localStorage` - Almacenamiento de datos del lado cliente
|
|
|
|
**Retos Intermedios:**
|
|
- `Intersection Observer API` - Detección de visibilidad de elementos
|
|
- `MutationObserver` - Supervisión de cambios en el DOM
|
|
- `Drag and Drop API` - Alternativa a nuestro enfoque basado en punteros
|
|
- `Geolocation API` - Acceso a la ubicación del usuario
|
|
|
|
**Exploración Avanzada:**
|
|
- `Web Components` - Elementos personalizados y shadow DOM
|
|
- `Canvas API` - Gráficos programáticos
|
|
- `Web Workers` - Procesamiento en segundo plano
|
|
- `Service Workers` - Funcionalidad sin conexión
|
|
|
|
### Paso 2: Investigar y Documentar
|
|
|
|
Crea un análisis exhaustivo (300-500 palabras) que incluya:
|
|
|
|
#### Visión Técnica
|
|
- **Define** lo que hace la interfaz elegida en lenguaje claro y para principiantes
|
|
- **Explica** los métodos, propiedades o eventos clave que ofrece
|
|
- **Describe** los tipos de problemas que está diseñada para resolver
|
|
|
|
#### Implementación en el Mundo Real
|
|
- **Encuentra** un sitio web que use la interfaz elegida (inspecciona el código o investiga ejemplos)
|
|
- **Documenta** la implementación específica con fragmentos de código si es posible
|
|
- **Analiza** por qué los desarrolladores eligieron este enfoque
|
|
- **Explica** cómo mejora la experiencia del usuario
|
|
|
|
#### Aplicación Práctica
|
|
- **Compara** tu interfaz con las técnicas que usamos en el proyecto terrarium
|
|
- **Sugiere** cómo tu interfaz podría mejorar o extender la funcionalidad del terrarium
|
|
- **Identifica** otros proyectos donde esta interfaz sería valiosa
|
|
|
|
### Paso 3: Ejemplo de Código
|
|
|
|
Incluye un ejemplo de código sencillo y funcional que demuestre tu interfaz en acción. Este debe ser:
|
|
- **Funcional** - El código debe funcionar cuando se pruebe
|
|
- **Comentado** - Explica qué hace cada parte
|
|
- **Relevante** - Relacionado con un caso de uso realista
|
|
- **Amigable para principiantes** - Comprensible para alguien que aprende desarrollo web
|
|
|
|
## Formato de Entrega
|
|
|
|
Estructura tu entrega con encabezados claros:
|
|
|
|
```markdown
|
|
# [Interface Name] DOM Investigation
|
|
|
|
## What It Does
|
|
[Technical overview]
|
|
|
|
## Real-World Example
|
|
[Website analysis and implementation details]
|
|
|
|
## Code Demonstration
|
|
[Your working example with comments]
|
|
|
|
## Reflection
|
|
[How this connects to our terrarium project and future applications]
|
|
```
|
|
|
|
## Rúbrica de Evaluación
|
|
|
|
| Criterios | Sobresaliente (A) | Competente (B) | En Desarrollo (C) | Necesita Mejorar (D) |
|
|
|-----------|-------------------|----------------|-------------------|----------------------|
|
|
| **Comprensión Técnica** | Demuestra comprensión profunda con explicaciones precisas y terminología adecuada | Muestra buena comprensión con explicaciones mayormente precisas | Comprensión básica con algunas concepciones erróneas | Comprensión limitada con errores significativos |
|
|
| **Análisis del Mundo Real** | Identifica y analiza a fondo una implementación real con ejemplos específicos | Encuentra un ejemplo real con análisis adecuado | Localiza ejemplo pero el análisis es superficial | Conexión vaga o inexacta con el mundo real |
|
|
| **Ejemplo de Código** | Código funcional, bien comentado que demuestra claramente la interfaz | Código funcional con comentarios adecuados | Código funciona pero necesita mejor documentación | Código con errores o explicación pobre |
|
|
| **Calidad de Escritura** | Escritura clara, atractiva con estructura y comunicación técnica apropiada | Bien organizado con buena escritura técnica | Organización y claridad adecuadas | Organización pobre o comunicación poco clara |
|
|
| **Pensamiento Crítico** | Establece conexiones profundas entre conceptos y sugiere aplicaciones innovadoras | Muestra buen análisis y conexiones relevantes | Análisis presente pero podría ser más profundo | Escasa evidencia de pensamiento crítico |
|
|
|
|
## Consejos para el Éxito
|
|
|
|
**Estrategias de Investigación:**
|
|
- **Comienza** con la documentación de MDN para información autorizada
|
|
- **Busca** ejemplos de código en GitHub o CodePen
|
|
- **Revisa** sitios web populares con herramientas de desarrollador del navegador
|
|
- **Mira** videos tutoriales para explicaciones visuales
|
|
|
|
**Guías para Escribir:**
|
|
- **Usa** tus propias palabras en lugar de copiar la documentación
|
|
- **Incluye** ejemplos específicos y fragmentos de código
|
|
- **Explica** conceptos técnicos como si se los enseñaras a un amigo
|
|
- **Conecta** tu interfaz con conceptos más amplios de desarrollo web
|
|
|
|
**Ideas para Ejemplos de Código:**
|
|
- **Crea** una demo sencilla que muestre las características principales de la interfaz
|
|
- **Construye** sobre conceptos de nuestro proyecto terrarium cuando sea pertinente
|
|
- **Prioriza** la funcionalidad sobre el diseño visual
|
|
- **Prueba** tu código para asegurar que funciona correctamente
|
|
|
|
## Fecha Límite de Entrega
|
|
|
|
[Inserte la fecha límite aquí]
|
|
|
|
## ¿Preguntas?
|
|
|
|
Si necesitas aclarar cualquier aspecto de esta asignación, ¡no dudes en preguntar! Esta investigación profundizará tu comprensión de cómo el DOM posibilita las experiencias web interactivas que usamos a diario.
|
|
|
|
---
|
|
|
|
<!-- 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 una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas derivadas del uso de esta traducción.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |