|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
|
|
|
"translation_date": "2025-10-03T08:28:47+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "es"
|
|
|
}
|
|
|
-->
|
|
|
# Asignación de Práctica HTML: Crear un Modelo de Blog
|
|
|
|
|
|
## Objetivo
|
|
|
|
|
|
Diseñar y codificar manualmente la estructura HTML para la página principal de un blog personal. Este ejercicio te ayudará a practicar HTML semántico, planificación de diseño y organización de código.
|
|
|
|
|
|
## Instrucciones
|
|
|
|
|
|
1. **Diseña el Modelo de tu Blog**
|
|
|
- Haz un boceto visual de la página principal de tu blog. Incluye secciones clave como encabezado, navegación, contenido principal, barra lateral y pie de página.
|
|
|
- Puedes usar papel y escanear tu boceto, o utilizar herramientas digitales (por ejemplo, Figma, Adobe XD, Canva o incluso PowerPoint).
|
|
|
|
|
|
2. **Identifica los Elementos HTML**
|
|
|
- Haz una lista de los elementos HTML que planeas usar para cada sección (por ejemplo, `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>`, etc.).
|
|
|
|
|
|
3. **Escribe el Código HTML**
|
|
|
- Codifica manualmente el HTML para tu modelo. Enfócate en la estructura semántica y las mejores prácticas.
|
|
|
- Incluye al menos 10 elementos HTML distintos.
|
|
|
- Agrega comentarios para explicar tus elecciones y estructura.
|
|
|
|
|
|
4. **Entrega tu Trabajo**
|
|
|
- Sube tu boceto/modelo y tu archivo HTML.
|
|
|
- Opcionalmente, proporciona una breve reflexión (2–3 oraciones) sobre tus decisiones de diseño.
|
|
|
|
|
|
## Rúbrica
|
|
|
|
|
|
| Criterios | Sobresaliente | Adecuado | Necesita Mejorar |
|
|
|
|------------------|--------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
|
|
|
| Modelo Visual | Modelo claro y detallado con secciones etiquetadas y diseño bien pensado | Modelo básico con algunas secciones etiquetadas | Modelo mínimo o poco claro; carece de etiquetas en las secciones |
|
|
|
| Elementos HTML | Usa 10+ elementos HTML semánticos; demuestra comprensión de estructura y mejores prácticas | Usa 5–9 elementos HTML; algo de estructura semántica | Usa menos de 5 elementos; carece de estructura semántica |
|
|
|
| Calidad del Código | Código bien organizado, legible y con comentarios; sigue los estándares HTML | Código mayormente organizado; pocos comentarios | Código desorganizado; carece de comentarios |
|
|
|
| Reflexión | Reflexión profunda sobre las decisiones de diseño y los desafíos | Reflexión básica | Sin reflexión o carece de relevancia |
|
|
|
|
|
|
## Consejos
|
|
|
|
|
|
- Usa etiquetas HTML semánticas para mejorar la accesibilidad y el SEO.
|
|
|
- Organiza tu código con indentación y comentarios.
|
|
|
- Consulta la [Referencia de Elementos HTML de MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) para orientación.
|
|
|
- Piensa en cómo tu diseño podría ampliarse o estilizarse en futuras asignaciones.
|
|
|
|
|
|
---
|
|
|
|
|
|
**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 automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como 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 que puedan surgir del uso de esta traducción. |
